.sf :where(a, button) { color: inherit; }
.sf :where(a) { text-decoration: none; }
.sf :where(button) { font: inherit; }
.sf :where(img, svg) { display: block; max-width: 100%; }
.sf :where(*, *::before, *::after) { box-sizing: border-box; }
.sf { margin-inline: 0; padding-inline: 0; }
@media (prefers-reduced-motion: reduce) {
.sf *, .sf *::before, .sf *::after {
transition: none !important;
animation: none !important;
}
}
.sf-home {
min-height: 100vh;
transition: background-color 150ms ease;
background-image: linear-gradient(to bottom right, #f8fafc, #ffffff, #f1f5f9);
}
.sf-home--dark {
background-image: linear-gradient(to bottom right, #020617, #0f172a, #020617);
}
.sf-banner { width: 100%; }
.sf-banner__img {
display: block;
width: 100%;
height: auto;
max-height: min(38vh, 360px);
object-fit: cover;
object-position: center;
}
.sf-collection__banner { width: 100%; }
.sf-collection__banner-img { display: block; width: 100%; height: auto; }
.sf-collection__header {
max-width: 80rem;
margin-inline: auto;
padding-inline: 1rem;
padding-block-start: 2rem;
padding-block-end: 1rem;
}
.sf-collection__title {
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
color: #0f172a;
}
@media (min-width: 640px) {
.sf-collection__title { font-size: 1.875rem; line-height: 2.25rem; }
}
.sf-collection__header--dark .sf-collection__title { color: #ffffff; }
.sf-collection__desc {
margin-top: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: #475569;
max-width: 42rem;
}
.sf-collection__header--dark .sf-collection__desc { color: #94a3b8; }
.sf-collection__desc--rtl,
.sf-collection__title--rtl { text-align: right; }
.sf-collection__back-link {
display: inline-block;
margin-top: 1rem;
padding-inline: 1.25rem;
padding-block: 0.625rem;
border-radius: 0.75rem;
border: 1px solid #cbd5e1;
color: #334155;
font-weight: 700;
}
.sf-collection__header--dark .sf-collection__back-link {
border-color: #334155;
color: #e2e8f0;
}
.sf-collection-strip { padding-block: 16px; }
.sf-collection-strip__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.sf-collection-strip__title {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
color: #0f172a;
}
.sf-collection-strip__view-all {
font-size: 0.875rem;
font-weight: 700;
color: var(--brand);
white-space: nowrap;
}
.sf-collection-strip__view-all:hover { text-decoration: underline; }
.sf-collection-strip__heading {
font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1rem; color: #0f172a;
}
.sf-featured-product { padding-block: 16px; }
.sf-featured-product__heading {
font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1rem; color: #0f172a;
}
.sf-featured-product__row {
display: flex;
flex-direction: column;
gap: 0;
border-radius: 1rem;
border: 1px solid #e2e8f0;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.5);
}
.sf-featured-product--dark .sf-featured-product__row {
background-color: rgba(30, 41, 59, 0.5);
border-color: #334155;
}
@media (min-width: 768px) {
.sf-featured-product__row { flex-direction: row; }
.sf-featured-product--image-right .sf-featured-product__row { flex-direction: row-reverse; }
}
.sf-featured-product__media {
position: relative;
flex: 1 1 50%;
min-height: 16rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #f3f4f6;
}
.sf-featured-product__img { width: 100%; height: 100%; object-fit: cover; }
.sf-featured-product__placeholder { font-size: 3rem; }
.sf-featured-product__badge {
position: absolute;
top: 0.75rem;
inset-inline-start: 0.75rem;
background-color: #e11d48;
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
}
.sf-featured-product__body {
flex: 1 1 50%;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.75rem;
}
.sf-featured-product__name { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #0f172a; }
.sf-featured-product__desc { font-size: 0.875rem; line-height: 1.375rem; color: #64748b; }
.sf-featured-product__price-row { display: flex; align-items: baseline; gap: 0.5rem; }
.sf-featured-product__price { font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
.sf-featured-product__was { font-size: 0.875rem; line-height: 1.25rem; color: #64748b; text-decoration: line-through; }
.sf-featured-product__cta {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
border-radius: 0.75rem;
padding: 0.75rem 1.5rem;
font-weight: 700;
}
.sf-filterbar {
position: sticky;
z-index: 40;
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid #e2e8f0;
padding-block: 1rem;
transition: background-color 150ms ease, border-color 150ms ease;
background-color: rgba(255, 255, 255, 0.8);
}
.sf-filterbar--dark {
background-color: rgba(15, 23, 42, 0.8);
border-bottom-color: #1e293b;
}
.sf-filterbar + .sf-section--product-grid { padding-block-start: 24px; }
.sf-filterbar__inner {
max-width: 80rem;
margin-inline: auto;
padding-inline: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.sf-filterbar__count {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
color: #475569;
}
.sf-filterbar__sort { position: relative; }
.sf-filterbar__sort-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
padding-inline: 1rem;
padding-block: 0.5rem;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
background-color: #ffffff;
color: #334155;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.sf-filterbar__sort-toggle--dark {
border-color: #334155;
background-color: #1e293b;
color: #cbd5e1;
}
.sf-filterbar__sort-icon {
width: 1rem;
height: 1rem;
transition: transform 150ms ease;
}
.sf-filterbar__sort-menu {
position: absolute;
left: 0;
margin-top: 0.5rem;
width: 12rem;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
z-index: 50;
background-color: #ffffff;
}
.sf-filterbar__sort-menu--rtl { left: auto; right: 0; }
.sf-filterbar__sort-menu--dark {
background-color: #1e293b;
border-color: #334155;
}
.sf-filterbar__sort-link {
display: block;
width: 100%;
text-align: left;
padding-inline: 1rem;
padding-block: 0.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.sf-filterbar__sort-link:hover { background-color: #f1f5f9; }
.sf-filterbar__sort-link--rtl { text-align: right; }
.sf-filterbar__sort-link--active { font-weight: 700; color: var(--brand); }
.sf-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding-block-end: 1.25rem;
}
.sf-chip {
display: inline-flex;
align-items: center;
border-radius: 9999px;
padding-inline: 1rem;
padding-block: 0.375rem;
font-size: 0.8125rem;
font-weight: 600;
border: 1px solid #e2e8f0;
background-color: #ffffff;
color: #475569;
text-decoration: none;
transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.sf-chip:hover { border-color: var(--brand); color: var(--brand); }
.sf-chip[aria-pressed="true"],
.sf-chip--active {
border-color: var(--brand);
background-color: color-mix(in srgb, var(--brand) 8%, white);
color: var(--brand);
}
.sf-main {
max-width: 80rem;
margin-inline: auto;
padding-inline: 1rem;
padding-block: 3rem;
}
.sf-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 768px) {
.sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
@media (min-width: 1024px) {
.sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-collection-strip .sf-grid { grid-template-columns: repeat(var(--sf-cols, 4), minmax(0, 1fr)); }
@container (max-width: 760px) {
.sf-collection-strip .sf-grid { grid-template-columns: repeat(var(--sf-cols-mobile, 2), minmax(0, 1fr)); }
}
.sf-grid__empty { grid-column: 1 / -1; text-align: center; padding-block: 5rem; }
.sf-grid__empty-text {
color: #475569;
font-size: 1.125rem;
line-height: 1.75rem;
}
.sf-grid__more { grid-column: 1 / -1; padding-block: 2rem; text-align: center; color: #9ca3af; }
.sf-grid__load-trigger { grid-column: 1 / -1; padding-block: 2rem; text-align: center; color: #9ca3af; }
.sf-card-wrap { height: 100%; border-radius: 0.75rem; }
.sf-card-link { height: 100%; display: block; }
.sf-card {
height: 100%;
border-radius: 0.75rem;
border: 1px solid #e2e8f0;
overflow: hidden;
display: flex;
flex-direction: column;
background-color: rgba(255, 255, 255, 0.5);
transition: box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.sf-card--dark {
background-color: rgba(30, 41, 59, 0.5);
border-color: #334155;
}
.sf-card:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.sf-card:focus-visible { box-shadow: 0 0 0 2px var(--brand); }
.sf-card__pad {
position: relative;
height: 8rem;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: #f3f4f6;
}
@media (min-width: 768px) {
.sf-card__pad { height: 10rem; }
}
.sf-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms ease;
}
.sf-card-wrap:hover .sf-card__img { transform: scale(1.1); }
.sf-card__placeholder { font-size: 2.25rem; line-height: 2.5rem; }
.sf-placeholder-glyph {
position: absolute; inset: 0; margin: auto;
width: 36%; height: 36%; max-width: 96px; max-height: 96px;
color: #94a3b8;
pointer-events: none;
}
.sf-card__badge {
position: absolute;
top: 0.5rem;
left: 0.5rem;
background-color: #ef4444;
color: #ffffff;
padding-inline: 0.5rem;
padding-block: 0.25rem;
border-radius: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
}
.sf-card__soldout {
position: absolute;
inset-block-start: 0.5rem;
inset-inline-start: 0.5rem;
z-index: 2;
padding-inline: 0.5rem;
padding-block: 0.25rem;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 0.5rem;
background-color: rgba(255, 255, 255, 0.94);
color: #334155;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
}
.sf-card--dark .sf-card__soldout {
border-color: rgba(255, 255, 255, 0.14);
background-color: rgba(15, 23, 42, 0.94);
color: #e2e8f0;
}
.sf-card__like {
position: absolute;
top: 0.5rem;
right: 0.5rem;
padding: 0.375rem;
border-radius: 9999px;
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition: background-color 150ms ease;
}
.sf-card__like:hover { background-color: #ffffff; }
.sf-card__like-icon { width: 1.25rem; height: 1.25rem; }
.sf-card__add {
position: absolute;
inset-block-end: 0.5rem;
inset-inline-end: 0.5rem;
z-index: 2;
width: 2.25rem;
height: 2.25rem;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 9999px;
border: 1px solid rgba(15, 23, 42, 0.08);
background-color: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: #0f172a;
box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
cursor: pointer;
transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.sf-card__add:hover { background-color: #0f172a; color: #ffffff; }
.sf-card__add:active { transform: scale(0.94); }
.sf-card__add:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }
.sf-card__add[aria-disabled="true"] {
background-color: #e2e8f0;
border-color: transparent;
color: #64748b;
box-shadow: none;
cursor: not-allowed;
}
.sf-card__add[aria-disabled="true"]:hover { background-color: #e2e8f0; color: #64748b; }
.sf-card__add[aria-disabled="true"]:active { transform: none; }
.sf-card__add[data-sf-added="true"],
.sf-card__add[data-sf-added="true"]:hover {
background-color: #15803d;
border-color: transparent;
color: #ffffff;
}
.sf-card__add--pick { background-color: rgba(255, 255, 255, 0.9); }
.sf-card__add-icon { width: 1.125rem; height: 1.125rem; }
.sf-card__add-icon[hidden] { display: none; }
.sf-card__body { padding: 0.75rem; flex: 1 1 0%; display: flex; flex-direction: column; }
.sf-card__name {
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 0.25rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: left;
}
@media (min-width: 768px) {
.sf-card__name { font-size: 0.875rem; line-height: 1.25rem; }
}
.sf-card__name--rtl { text-align: right; }
.sf-card__desc {
font-size: 0.75rem;
line-height: 1rem;
color: #475569;
margin-bottom: 0.75rem;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-align: left;
}
.sf-card__desc--rtl { text-align: right; }
.sf-card__price-row-wrap {
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px solid #e2e8f0;
}
.sf-card__price-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.sf-card__price { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; }
@media (min-width: 768px) {
.sf-card__price { font-size: 1.25rem; line-height: 1.75rem; }
}
.sf-card__was { font-size: 0.75rem; line-height: 1rem; color: #64748b; text-decoration: line-through; }
@media (min-width: 768px) {
.sf-card__was { font-size: 0.875rem; line-height: 1.25rem; }
}
.sf-card__cta {
display: block;
width: 100%;
margin-top: 0.75rem;
padding-block: 0.5rem;
border-radius: 0.5rem;
color: #ffffff;
font-weight: 600;
font-size: 0.75rem;
line-height: 1rem;
text-align: center;
transition: box-shadow 150ms ease;
}
@media (min-width: 768px) {
.sf-card__cta { font-size: 0.875rem; line-height: 1.25rem; }
}
.sf-card__cta--hoverable:hover { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.sf-nav {
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-bottom: 1px solid #e2e8f0;
background-color: rgba(255, 255, 255, 0.8);
transition: background-color 150ms ease, border-color 150ms ease;
position: relative;
}
.sf-nav--dark {
background-color: rgba(15, 23, 42, 0.8);
border-bottom-color: #1e293b;
}
.sf-nav--sticky {
position: sticky;
top: 0;
z-index: 50;
}
.sf-nav__inner {
max-width: 80rem;
margin-inline: auto;
padding-inline: 1rem;
padding-block: 1rem;
}
.sf-nav__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: nowrap;
}
.sf-nav__logo {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.sf-nav__logo-img {
height: 3.5rem;
width: auto;
object-fit: contain;
}
@media (min-width: 640px) {
.sf-nav__logo-img { height: 3rem; }
}
.sf-nav__logo-glyph {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.75rem;
line-height: 1;
}
.sf-nav__logo-name {
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
color: #0f172a;
}
.sf-nav__search {
display: none;
flex: 1 1 0%;
max-width: 28rem;
margin-inline: 1rem;
}
@media (min-width: 768px) {
.sf-nav__search { display: block; }
}
.sf-nav__search-box {
position: relative;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
background-color: #ffffff;
transition: background-color 150ms ease, border-color 150ms ease;
}
.sf-nav__search-box--dark {
border-color: #334155;
background-color: #1e293b;
}
.sf-nav__search-input {
width: 100%;
padding-left: 2.5rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-radius: 0.5rem;
outline: none;
font-size: 0.875rem;
line-height: 1.25rem;
text-align: left;
background-color: transparent;
color: #0f172a;
}
.sf-nav__search-input::placeholder { color: #64748b; }
.sf-nav__search-input--rtl { text-align: right; }
.sf-nav__search-input--dark { color: #ffffff; }
.sf-nav__search-input--dark::placeholder { color: #94a3b8; }
.sf-nav__search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
width: 1rem;
height: 1rem;
color: #94a3b8;
pointer-events: none;
}
.sf-nav__search-toggle-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
}
@media (min-width: 768px) {
.sf-nav__search-toggle-wrap { display: none; }
}
.sf-nav__search-toggle {
padding: 0.5rem;
}
.sf-nav__search-toggle-icon {
width: 1.25rem;
height: 1.25rem;
color: #0f172a;
}
.sf-nav__search-mobile {
margin-top: 1rem;
}
@media (min-width: 768px) {
.sf-nav__search-mobile { display: none; }
}
.sf-nav__search-mobile-input {
width: 100%;
padding-inline: 1rem;
padding-block: 0.5rem;
border-radius: 0.5rem;
outline: none;
font-size: 0.875rem;
line-height: 1.25rem;
background-color: #f9fafb;
}
.sf-nav__links {
display: none;
align-items: center;
gap: 1.25rem;
min-width: 0;
flex: 1 1 auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
@media (min-width: 768px) {
.sf-nav__links { display: flex; }
}
.sf-nav__link {
flex-shrink: 0;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: #334155;
white-space: nowrap;
padding-block: 0.125rem;
border-bottom: 2px solid transparent;
transition: color 150ms ease, border-color 150ms ease;
}
.sf-nav__link:hover { color: #0f172a; }
.sf-nav__link--active {
color: #0f172a;
border-bottom-color: currentColor;
}
.sf-nav--dark .sf-nav__link { color: #cbd5e1; }
.sf-nav--dark .sf-nav__link:hover,
.sf-nav--dark .sf-nav__link--active { color: #ffffff; }
.sf-nav__mobile-controls {
display: contents;
}
.sf-nav__burger {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
}
@media (min-width: 768px) {
.sf-nav__burger { display: none; }
}
.sf-nav__burger-icon {
width: 1.25rem;
height: 1.25rem;
color: #0f172a;
}
.sf-nav--dark .sf-nav__burger-icon { color: #ffffff; }
.sf-nav__menu-panel {
position: absolute;
inset-inline: 0;
top: 100%;
z-index: 45;
display: flex;
flex-direction: column;
gap: 0.125rem;
padding: 0.75rem 1rem 1rem;
background-color: #ffffff;
border-top: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
box-shadow: 0 12px 24px -12px rgba(15, 23, 42, 0.25);
max-height: calc(100vh - 100%);
overflow-y: auto;
}
@media (min-width: 768px) {
.sf-nav__menu-panel { display: none; }
}
.sf-nav--dark .sf-nav__menu-panel {
background-color: #0f172a;
border-color: #1e293b;
}
.sf-nav__menu-panel .sf-nav__link {
display: block;
padding-block: 0.625rem;
padding-inline: 0.5rem;
border-bottom: none;
border-radius: 0.375rem;
}
.sf-nav__menu-panel .sf-nav__link--active {
background-color: #f1f5f9;
}
.sf-nav--dark .sf-nav__menu-panel .sf-nav__link--active {
background-color: #1e293b;
}
.sf-pnav__container {
max-width: 80rem;
margin-inline: auto;
padding-inline: 1rem;
}
@media (min-width: 640px) {
.sf-pnav__container { padding-inline: 1.5rem; }
}
@media (min-width: 1024px) {
.sf-pnav__container { padding-inline: 2rem; }
}
.sf-pnav__row {
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
gap: 1rem;
flex-wrap: nowrap;
}
.sf-pnav__logo-wrap {
flex-shrink: 0;
display: flex;
align-items: center;
}
.sf-pnav__logo-fallback {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sf-product {
min-height: 100vh;
transition: background-color 150ms ease;
background-image: linear-gradient(to bottom, #f8fafc, #ffffff);
}
.sf-product--dark {
background-image: linear-gradient(to bottom, #020617, #0f172a);
}
.sf-product__header {
position: relative;
z-index: 50;
width: 100%;
display: flex;
flex-direction: column;
}
.sf-product__main {
max-width: 64rem;
margin-inline: auto;
padding-inline: 1rem;
padding-block: 1rem;
}
@media (min-width: 640px) {
.sf-product__main { padding-inline: 1.5rem; padding-block: 2rem; }
}
.sf-product__layout {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 2.5rem;
}
.sf-product__layout > * { min-width: 0; }
@media (min-width: 640px) {
.sf-product__layout { gap: 2rem; margin-bottom: 4rem; }
}
@media (min-width: 1024px) {
.sf-product__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-product__gallery { display: flex; flex-direction: column; }
.sf-product__gallery > * + * { margin-top: 1rem; }
.sf-product__gallery-frame {
position: relative;
overflow: hidden;
border-radius: 1rem;
border: 1px solid #e2e8f0;
aspect-ratio: 1 / 1;
}
.sf-product__gallery-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 300ms ease;
}
.sf-product__gallery-placeholder {
display: flex;
height: 100%;
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
background-color: #f1f5f9;
color: #94a3b8;
}
.sf-product__gallery-placeholder-icon { width: 5rem; height: 5rem; }
.sf-product__gallery-placeholder-text { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.sf-product__gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2rem;
height: 2rem;
border-radius: 9999px;
background-color: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
color: #334155;
transition: background-color 150ms ease;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
.sf-product__gallery-nav:hover { background-color: #ffffff; }
.sf-product__gallery-nav--prev { left: 0.5rem; }
.sf-product__gallery-nav--next { right: 0.5rem; }
.sf-product__gallery-nav-icon { width: 1rem; height: 1rem; }
.sf-product__gallery-counter {
position: absolute;
bottom: 0.75rem;
right: 0.75rem;
padding-inline: 0.625rem;
padding-block: 0.25rem;
border-radius: 9999px;
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
}
.sf-product__gallery-autoplay { position: absolute; top: 0.75rem; right: 0.75rem; }
.sf-product__gallery-autoplay-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
animation: sf-product-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes sf-product-pulse { 50% { opacity: 0.5; } }
.sf-product__thumbs {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.sf-product__thumb {
width: 3.5rem;
height: 3.5rem;
flex-shrink: 0;
border-radius: 0.5rem;
border-width: 2px;
border-style: solid;
overflow: hidden;
transition: all 150ms ease;
}
.sf-product__thumb-img { width: 100%; height: 100%; object-fit: cover; }
.sf-buybox {
border-radius: 1rem;
border: 1px solid #e2e8f0;
padding: 0.75rem;
background-color: rgba(255, 255, 255, 0.5);
}
@media (min-width: 640px) {
.sf-buybox { padding: 1.25rem; }
}
.sf-buybox > * + * { margin-top: 0.75rem; }
@media (min-width: 640px) {
.sf-buybox > * + * { margin-top: 1.25rem; }
}
.sf-buybox__title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: #0f172a; margin-bottom: 0.5rem; }
@media (min-width: 640px) {
.sf-buybox__title { font-size: 1.5rem; line-height: 2rem; }
}
.sf-buybox__desc { color: #64748b; margin-bottom: 0.75rem; }
.sf-buybox__price-row { display: flex; align-items: flex-end; gap: 0.75rem; }
.sf-buybox__price { font-size: 1.5rem; line-height: 2rem; font-weight: 900; }
@media (min-width: 640px) {
.sf-buybox__price { font-size: 1.875rem; line-height: 2.25rem; }
}
.sf-buybox__compare { font-size: 0.875rem; line-height: 1.25rem; color: #94a3b8; text-decoration: line-through; font-weight: 500; }
@media (min-width: 640px) {
.sf-buybox__compare { font-size: 1rem; line-height: 1.5rem; }
}
.sf-buybox__discount {
padding-inline: 0.5rem;
padding-block: 0.125rem;
background-color: #fee2e2;
color: #dc2626;
font-size: 10px;
font-weight: 700;
border-radius: 9999px;
}
@media (min-width: 640px) {
.sf-buybox__discount { font-size: 0.75rem; line-height: 1rem; }
}
.sf-buybox-empty {
border-radius: 1rem;
border: 1px dashed #cbd5e1;
padding: 1.5rem;
text-align: center;
color: #64748b;
}
.sf-catalog-section-empty {
border-radius: 1rem;
border: 1px dashed #cbd5e1;
padding: 1.5rem;
text-align: center;
color: #64748b;
}
.sf-preview-empty-hint {
border-radius: 1rem;
border: 1px dashed #cbd5e1;
padding: 2rem;
text-align: center;
color: #64748b;
}
.sf-product__description-heading {
font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1rem; color: #0f172a;
}
.sf-product__trust {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 1fr;
align-items: stretch;
gap: 1rem;
padding-block: 0.5rem;
border-top: 1px solid #e2e8f0;
}
@media (min-width: 640px) {
.sf-product__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-product__trust-item {
display: flex;
height: 100%;
min-height: 9rem;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
padding: 1rem;
border-radius: 0.75rem;
border: 1px solid #f1f5f9;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
background-color: #ffffff;
}
.sf-product__trust-icon-wrap {
margin-bottom: 0.75rem;
display: flex;
height: 3rem;
width: 3rem;
align-items: center;
justify-content: center;
border-radius: 9999px;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
background-color: #ffffff;
}
.sf-product__trust-icon { width: 1.5rem; height: 1.5rem; }
.sf-product__trust-title {
width: 100%;
min-height: 2.5rem;
font-weight: 700;
font-size: 0.875rem;
line-height: 1.25;
color: #0f172a;
margin-bottom: 0.25rem;
}
.sf-product__trust-desc {
width: 100%;
font-size: 10px;
line-height: 1.25;
color: #64748b;
}
@media (min-width: 640px) {
.sf-product__trust-desc { font-size: 0.75rem; line-height: 1rem; }
}
.sf-variant-group { margin-top: 0.75rem; }
.sf-variant-group__label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: #334155; }
.sf-variant-select-wrap { position: relative; }
.sf-variant-select {
width: 100%;
min-height: 2.75rem;
appearance: none;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
background-color: #ffffff;
padding-inline: 0.75rem;
padding-block: 0.625rem;
padding-inline-end: 2.5rem;
text-align: start;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
color: #334155;
outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.sf-variant-select:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.sf-variant-select-chevron { position: absolute; inset-inline-end: 0.75rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.sf-variant-select-chevron-icon { width: 1rem; height: 1rem; }
.sf-variant-buttons-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sf-variant-swatch-dot { width: 1.25rem; height: 1.25rem; border-radius: 9999px; border: 1px solid rgb(0 0 0 / 0.1); flex-shrink: 0; }
.sf-variant[data-display-mode="image"] {
min-width: 44px; min-height: 44px; height: auto;
border-radius: 0.5rem;
}
.sf-variant[data-display-mode="image"]:has(> .sf-variant-thumb) { padding: 1px; gap: 0; }
.sf-variant[data-display-mode="image"][aria-checked="true"] {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--brand);
}
.sf-variant[data-display-mode="image"][data-state="disabled"] { opacity: .4; cursor: not-allowed; }
.sf-variant[data-display-mode="image"]:focus-visible,
.sf-variant[data-display-mode="swatch"]:focus-visible {
outline: 2px dashed var(--sf-focus, #0f172a);
outline-offset: 2px;
}
.sf-variant[data-display-mode="image"][aria-checked="true"]:focus-visible,
.sf-variant[data-display-mode="swatch"][aria-checked="true"]:focus-visible { outline-offset: 6px; }
.sf-variant[data-display-mode="swatch"]:focus-visible { outline-offset: 6px; }
.sf-variant-thumb {
display: block; width: 40px; height: 40px; flex: none;
object-fit: cover; border-radius: 0.375rem;
}
.sf-of {
background-color: #ffffff;
padding: 0.75rem;
}
.sf-of__qty { display: flex; align-items: center; justify-content: space-between; }
.sf-of__qty-label { font-weight: 700; font-size: 0.875rem; line-height: 1.25rem; color: #334155; }
.sf-of__qty-control { display: flex; align-items: center; gap: 0.75rem; }
.sf-of__qty-btn {
width: 2rem;
height: 2rem;
border-radius: 0.5rem;
border: 1px solid #e2e8f0;
transition: background-color 150ms ease;
display: flex;
align-items: center;
justify-content: center;
color: #475569;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
}
.sf-of__qty-btn:hover { background-color: #f1f5f9; }
.sf-of__qty-value { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; width: 1.5rem; text-align: center; }
.sf-of__summary {
border-radius: 0.75rem;
border: 1px solid #e2e8f0;
padding: 0.75rem;
background-color: #f8fafc;
}
.sf-of__summary > * + * { margin-top: 0.375rem; }
.sf-of__summary--pending {}
.sf-product__similar { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid #e2e8f0; }
.sf-product__similar-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: #0f172a; }
.sf-product__similar-scroller {
display: flex;
overflow-x: auto;
gap: 1rem;
scroll-snap-type: x mandatory;
padding-bottom: 0.5rem;
}
.sf-product__similar-card {
display: block;
scroll-snap-align: center;
flex-shrink: 0;
width: 200px;
}
@media (min-width: 640px) {
.sf-product__similar-card { width: 16rem; }
}
.sf-section-similar-products .sf-product__similar-card {
width: calc((100% - (var(--sf-cols, 4) - 1) * 1rem) / var(--sf-cols, 4));
}
@container (max-width: 760px) {
.sf-section-similar-products .sf-product__similar-card {
width: calc((100% - (var(--sf-cols-mobile, 2) - 1) * 1rem) / var(--sf-cols-mobile, 2));
}
}
.sf-product__similar-frame {
border-radius: 0.75rem;
overflow: hidden;
border: 1px solid #e2e8f0;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.sf-product__similar-thumb {
height: 8rem;
background-color: #f3f4f6;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.sf-product__similar-thumb { height: 10rem; }
}
.sf-product__similar-img { width: 100%; height: 100%; object-fit: cover; transition: transform 150ms ease; }
.sf-product__similar-card:hover .sf-product__similar-img { transform: scale(1.1); }
.sf-product__similar-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 2rem; }
.sf-product__similar-badge {
position: absolute;
top: 0.5rem;
left: 0.5rem;
background-color: #ef4444;
color: #ffffff;
padding-inline: 0.5rem;
padding-block: 0.25rem;
border-radius: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
}
.sf-product__similar-body { padding: 0.75rem; }
.sf-product__similar-name {
font-weight: 700;
font-size: 0.875rem;
line-height: 1.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #0f172a;
}
.sf-product__similar-price-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.25rem; }
.sf-product__similar-price { font-weight: 700; font-size: 0.875rem; line-height: 1.25rem; }
.sf-product__similar-compare { font-size: 0.75rem; line-height: 1rem; color: #94a3b8; text-decoration: line-through; }
.sf-product__similar-cta {
width: 100%;
margin-top: 0.5rem;
padding-block: 0.375rem;
border-radius: 0.5rem;
color: #ffffff;
font-weight: 600;
font-size: 0.75rem;
line-height: 1rem;
transition: box-shadow 150ms ease;
}
.sf-cart { max-width: 48rem; margin-inline: auto; padding-inline: 1rem; padding-block: 2rem; }
.sf-cart__back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; color: #64748b; margin-bottom: 1.5rem; }
.sf-cart__back:hover { color: #334155; }
.sf-cart__back-icon { width: 1rem; height: 1rem; }
[dir="rtl"] .sf-cart__back-icon { transform: rotate(180deg); }
.sf-cart__title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1.5rem; }
.sf-cart__success { text-align: center; padding-block: 4rem; border-radius: 1rem; border: 1px solid #a7f3d0; background-color: #ecfdf5; }
.sf-cart__success--dark { border-color: rgba(6, 78, 59, 0.5); background-color: rgba(6, 78, 59, 0.2); }
.sf-cart__success-icon { width: 3rem; height: 3rem; margin-inline: auto; margin-bottom: 1rem; color: #10b981; }
.sf-cart__success-title { font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; margin-bottom: 0.5rem; }
.sf-cart__success-hint { font-size: 0.875rem; line-height: 1.25rem; color: #64748b; margin-bottom: 1.5rem; }
.sf-cart__success-actions { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.sf-cart__track-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding-inline: 1.5rem; padding-block: 0.75rem; border-radius: 0.75rem; font-weight: 700; color: #ffffff; }
.sf-cart__track-icon { width: 1rem; height: 1rem; }
.sf-cart__track-hint { font-size: 0.75rem; line-height: 1rem; color: #64748b; }
.sf-cart__continue { display: inline-block; padding-inline: 1.5rem; padding-block: 0.75rem; border-radius: 0.75rem; font-weight: 700; }
.sf-cart__continue--filled { color: #ffffff; }
.sf-cart__continue--ghost { color: #334155; border: 1px solid #cbd5e1; }
.sf-cart__continue--ghost-dark { color: #e2e8f0; border-color: #334155; }
.sf-cart__empty { text-align: center; padding-block: 4rem; border-radius: 1rem; border: 1px solid #e2e8f0; background-color: #ffffff; }
.sf-cart__empty--dark { border-color: #1e293b; background-color: rgba(15, 23, 42, 0.5); }
.sf-cart__empty-text { color: #64748b; margin-bottom: 1rem; }
.sf-cart__lines { border-radius: 1rem; border: 1px solid #e2e8f0; overflow: hidden; margin-bottom: 1.5rem; background-color: #ffffff; }
.sf-cart__lines--dark { border-color: #1e293b; background-color: rgba(15, 23, 42, 0.5); }
.sf-cart__line { display: flex; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid #f1f5f9; }
.sf-cart__line:last-child { border-bottom: none; }
.sf-cart__line--dark { border-bottom-color: #1e293b; }
.sf-cart__line-img { width: 4rem; height: 4rem; border-radius: 0.5rem; overflow: hidden; flex-shrink: 0; background-color: #f1f5f9; }
.sf-cart__line-img-el { width: 100%; height: 100%; object-fit: cover; }
.sf-cart__line-body { flex: 1 1 0%; min-width: 0; }
.sf-cart__line-name { font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; }
.sf-cart__line-variant { font-size: 0.75rem; line-height: 1rem; color: #64748b; }
.sf-cart__line-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.sf-cart__qty-btn { width: 1.75rem; height: 1.75rem; border-radius: 0.25rem; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; }
.sf-cart__qty-value { font-size: 0.875rem; line-height: 1.25rem; width: 1.5rem; text-align: center; }
.sf-cart__remove { margin-inline-start: auto; font-size: 0.75rem; line-height: 1rem; color: #ef4444; }
.sf-cart__remove:hover { text-decoration: underline; }
.sf-cart__line-price { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; white-space: nowrap; }
.sf-cart__unavailable { margin-bottom: 1.5rem; padding: 1rem; border-radius: 0.75rem; border: 1px solid #fcd34d; background-color: #fffbeb; color: #78350f; font-size: 0.875rem; line-height: 1.25rem; }
.sf-cart__unavailable-title { font-weight: 600; margin-bottom: 0.25rem; }
.sf-cart__form { display: flex; flex-direction: column; gap: 0.75rem; border-radius: 1rem; border: 1px solid #e2e8f0; padding: 1rem; background-color: #ffffff; }
.sf-cart__form--dark { border-color: #1e293b; background-color: rgba(15, 23, 42, 0.5); }
.sf-cart__totals { padding-top: 0.75rem; border-top: 1px solid #f1f5f9; font-size: 0.875rem; line-height: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }
.sf-cart__totals--dark { border-top-color: #1e293b; }
.sf-cart__totals-row { display: flex; justify-content: space-between; }
.sf-cart__totals-row--total { font-weight: 700; font-size: 1rem; line-height: 1.5rem; padding-top: 0.25rem; }
.sf-cart__delivery-pending { color: #94a3b8; }
.sf-cart__error { font-size: 0.875rem; line-height: 1.25rem; color: #dc2626; }
.sf-cart__submit { width: 100%; padding-block: 0.75rem; border-radius: 0.75rem; font-weight: 700; color: #ffffff; }
.sf-cart__submit:disabled { opacity: 0.6; cursor: not-allowed; }
.sf-cart-root { display: contents; }
.sf-cart-toggle {
position: fixed;
inset-block-start: 1rem;
inset-inline-end: 1rem;
z-index: 60;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 9999px;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
border: 1px solid #e2e8f0;
background-color: #ffffff;
color: #0f172a;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.sf-cart-toggle--dark { background-color: #1e293b; border-color: #334155; color: #ffffff; }
.sf-cart-toggle__icon { width: 1.5rem; height: 1.5rem; }
.sf-cart-badge {
position: absolute;
inset-block-start: -0.25rem;
inset-inline-end: -0.25rem;
min-width: 1.25rem;
height: 1.25rem;
padding-inline: 0.25rem;
border-radius: 9999px;
background-color: #ef4444;
color: #ffffff;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.sf-cart-overlay { position: fixed; inset: 0; z-index: 70; }
.sf-cart-backdrop { position: absolute; inset: 0; background-color: rgb(0 0 0 / 0.4); }
.sf-cart-drawer {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
height: 100%;
width: 100%;
max-width: 28rem;
display: flex;
flex-direction: column;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
background-color: #ffffff;
color: #0f172a;
}
.sf-cart-drawer--dark { background-color: #0f172a; color: #ffffff; }
.sf-cart-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-inline: 1rem; padding-block: 1rem; border-bottom: 1px solid #e2e8f0; }
.sf-cart-drawer__header--dark { border-bottom-color: #1e293b; }
.sf-cart-drawer__title { font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; }
.sf-cart-drawer__close { padding: 0.5rem; border-radius: 0.5rem; }
.sf-cart-drawer__close:hover { background-color: rgb(0 0 0 / 0.05); }
.sf-cart-drawer__close-icon { width: 1.25rem; height: 1.25rem; }
.sf-cart-drawer__body { flex: 1 1 0%; overflow-y: auto; padding-inline: 1rem; padding-block: 0.75rem; }
.sf-cart-drawer__empty { text-align: center; font-size: 0.875rem; line-height: 1.25rem; color: #64748b; padding-block: 2.5rem; }
.sf-cart-drawer__line { display: flex; gap: 0.75rem; padding-block: 0.75rem; border-bottom: 1px solid #f1f5f9; }
.sf-cart-drawer__line--dark { border-bottom-color: #1e293b; }
.sf-cart-drawer__line-img { width: 4rem; height: 4rem; border-radius: 0.5rem; overflow: hidden; flex-shrink: 0; background-color: #f1f5f9; }
.sf-cart-drawer__line-img-el { width: 100%; height: 100%; object-fit: cover; }
.sf-cart-drawer__line-body { flex: 1 1 0%; min-width: 0; }
.sf-cart-drawer__line-name { font-weight: 600; font-size: 0.875rem; line-height: 1.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-cart-drawer__line-variant { font-size: 0.75rem; line-height: 1rem; color: #64748b; }
.sf-cart-drawer__line-price { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; margin-top: 0.25rem; }
.sf-cart-drawer__line-controls { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.sf-cart-drawer__qty-btn { width: 1.75rem; height: 1.75rem; border-radius: 0.25rem; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; }
.sf-cart-drawer__qty-btn--dark { border-color: #334155; }
.sf-cart-drawer__qty-value { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; width: 1.5rem; text-align: center; }
.sf-cart-drawer__remove { margin-inline-start: auto; font-size: 0.75rem; line-height: 1rem; color: #ef4444; }
.sf-cart-drawer__remove:hover { text-decoration: underline; }
.sf-cart-drawer__footer { padding-inline: 1rem; padding-block: 1rem; border-top: 1px solid #e2e8f0; }
.sf-cart-drawer__footer--dark { border-top-color: #1e293b; }
.sf-cart-drawer__subtotal-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.sf-cart-drawer__subtotal-label { font-size: 0.875rem; line-height: 1.25rem; color: #64748b; }
.sf-cart-drawer__subtotal-value { font-weight: 700; }
.sf-cart-drawer__checkout { display: block; width: 100%; text-align: center; padding-block: 0.75rem; border-radius: 0.75rem; font-weight: 700; color: #ffffff; }
.sf-track { min-height: 100vh; transition: background-color 150ms ease; background-color: #f8fafc; }
.sf-track--dark { background-color: #020617; }
.sf-track__header { border-bottom: 1px solid #e2e8f0; transition: background-color 150ms ease, border-color 150ms ease; background-color: #ffffff; }
.sf-track__header--dark { background-color: #0f172a; border-bottom-color: #1e293b; }
.sf-track__header-inner { max-width: 42rem; margin-inline: auto; padding-inline: 1rem; padding-block: 1rem; }
.sf-track__logo { display: flex; align-items: center; gap: 0.5rem; }
.sf-track__logo-img { height: 2.5rem; width: auto; object-fit: contain; }
.sf-track__logo-glyph { flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; }
.sf-track__logo-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: #0f172a; }
.sf-track__logo-name--dark { color: #ffffff; }
.sf-track__main { max-width: 42rem; margin-inline: auto; padding-inline: 1rem; padding-block: 1.5rem; }
@media (min-width: 640px) { .sf-track__main { padding-block: 2.5rem; } }
.sf-track__heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: #0f172a; }
@media (min-width: 640px) { .sf-track__heading { font-size: 1.875rem; line-height: 2.25rem; } }
.sf-track__heading--dark { color: #ffffff; }
.sf-track__section { border-radius: 1rem; border: 1px solid #e2e8f0; padding: 1rem; margin-bottom: 1rem; transition: background-color 150ms ease, border-color 150ms ease; background-color: #ffffff; }
@media (min-width: 640px) { .sf-track__section { padding: 1.25rem; } }
.sf-track__section--dark { background-color: #0f172a; border-color: #1e293b; }
.sf-track__summary-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.sf-track__label { font-size: 0.75rem; line-height: 1rem; text-transform: uppercase; letter-spacing: 0.025em; color: #64748b; }
.sf-track__label--dark { color: #94a3b8; }
.sf-track__order-number { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: #0f172a; }
.sf-track__order-number--dark { color: #ffffff; }
.sf-track__summary-right { text-align: end; }
.sf-track__placed-value { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #334155; }
.sf-track__placed-value--dark { color: #e2e8f0; }
.sf-track__status { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 9999px; padding-inline: 0.75rem; padding-block: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.sf-track__status--bad { background-color: #ffe4e6; color: #be123c; }
.sf-track__status--delivered { background-color: #d1fae5; color: #047857; }
.sf-track__status--pending { background-color: #f1f5f9; color: #334155; }
.sf-track__status-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; display: inline-block; }
.sf-track__status-dot--bad { background-color: #f43f5e; }
.sf-track__status-dot--delivered { background-color: #10b981; }
.sf-track__status-dot--pending { background-color: #64748b; }
.sf-track__timeline { position: relative; }
.sf-track__step { display: flex; gap: 0.75rem; padding-bottom: 1.25rem; position: relative; }
.sf-track__step:last-child { padding-bottom: 0; }
.sf-track__connector { position: absolute; top: 1.5rem; bottom: 0; width: 1px; inset-inline-start: 0.75rem; background-color: #e2e8f0; }
.sf-track__connector--dark { background-color: #334155; }
.sf-track__connector--done { background-color: #34d399; }
.sf-track__step-marker { position: relative; z-index: 10; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.sf-track__step-marker--done { background-color: #10b981; }
.sf-track__step-marker--current { background-color: var(--brand); }
.sf-track__step-marker--upcoming { background-color: #e2e8f0; }
.sf-track__step-marker--upcoming-dark { background-color: #334155; }
.sf-track__step-marker-check { width: 0.875rem; height: 0.875rem; color: #ffffff; }
.sf-track__step-marker-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background-color: #ffffff; }
.sf-track__step-body { min-width: 0; padding-top: 0.125rem; }
.sf-track__step-title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; }
.sf-track__step-title--upcoming { color: #94a3b8; }
.sf-track__step-title--upcoming-dark { color: #64748b; }
.sf-track__step-title--active { color: #0f172a; }
.sf-track__step-title--active-dark { color: #ffffff; }
.sf-track__step-date { font-size: 0.75rem; line-height: 1rem; margin-top: 0.125rem; color: #64748b; }
.sf-track__step-date--dark { color: #94a3b8; }
.sf-track__items-heading { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; color: #0f172a; }
.sf-track__items-heading--dark { color: #ffffff; }
.sf-track__items-list > * + * { border-top: 1px solid #f1f5f9; }
.sf-track__items-list--dark > * + * { border-top-color: #1e293b; }
.sf-track__item { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.75rem; }
.sf-track__item-img { width: 3rem; height: 3rem; border-radius: 0.5rem; object-fit: cover; flex-shrink: 0; background-color: #f1f5f9; }
.sf-track__item-img--dark { background-color: #1e293b; }
.sf-track__item-body { min-width: 0; flex: 1 1 0%; }
.sf-track__item-name { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #0f172a; }
.sf-track__item-name--dark { color: #ffffff; }
.sf-track__item-meta { font-size: 0.75rem; line-height: 1rem; color: #64748b; }
.sf-track__item-meta--dark { color: #94a3b8; }
.sf-track__item-price { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; color: #0f172a; }
.sf-track__item-price--dark { color: #ffffff; }
.sf-track__totals { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #f1f5f9; font-size: 0.875rem; line-height: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.sf-track__totals--dark { border-top-color: #1e293b; }
.sf-track__totals-row { display: flex; justify-content: space-between; }
.sf-track__totals-label { color: #64748b; }
.sf-track__totals-label--dark { color: #94a3b8; }
.sf-track__totals-value { color: #334155; }
.sf-track__totals-value--dark { color: #e2e8f0; }
.sf-track__totals-row--grand { padding-top: 0.375rem; border-top: 1px solid #f1f5f9; }
.sf-track__totals-row--grand-dark { border-top-color: #1e293b; }
.sf-track__totals-label--bold { font-weight: 700; color: #0f172a; }
.sf-track__totals-label--bold-dark { color: #ffffff; }
.sf-track__totals-value--bold { font-weight: 700; color: #0f172a; }
.sf-track__totals-value--bold-dark { color: #ffffff; }
.sf-track__delivery-list { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; }
.sf-track__delivery-row { display: flex; justify-content: space-between; gap: 1rem; }
.sf-track__delivery-value { font-weight: 500; text-align: end; color: #334155; }
.sf-track__delivery-value--dark { color: #e2e8f0; }
.sf-track__contact { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; border-radius: 0.75rem; padding-inline: 1rem; padding-block: 0.875rem; color: #ffffff; font-weight: 600; transition: background-color 150ms ease; }
.sf-track__contact--whatsapp { background-color: #25D366; }
.sf-track__contact--whatsapp:hover { background-color: #1da851; }
.sf-track__contact--phone { background-color: var(--brand); }
.sf-track__contact--phone:hover { background-color: color-mix(in srgb, var(--brand) 82%, black); }
.sf-track__contact-icon { width: 1.25rem; height: 1.25rem; }
.sf-track__hint { margin-top: 1rem; text-align: center; font-size: 0.75rem; line-height: 1rem; color: #94a3b8; }
.sf-track__hint--dark { color: #64748b; }
.sf-product__description { display: flex; flex-direction: column; gap: 2rem; padding-top: 1.5rem; border-top: 1px solid #e2e8f0; }
.sf-product__description-body { color: #475569; line-height: 1.625; }
.sf-product__description-body--rtl { text-align: right; font-family: Inter, Poppins, "Noto Sans Arabic", sans-serif; }
.sf-product__description-images { display: flex; flex-direction: column; }
.sf-product__description-image-wrap { overflow: hidden; }
.sf-product__description-image { width: 100%; height: auto; object-fit: cover; }
.sf-product__sticky-cta {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
padding: 1rem;
background-color: rgb(255 255 255 / 0.8);
backdrop-filter: blur(16px);
border-top: 1px solid currentColor;
z-index: 40;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0.5rem 0.625rem;
}
@media (min-width: 1024px) { .sf-product__sticky-cta { display: none; } }
.sf-product__sticky-cta-btn { width: 100%; padding-block: 1rem; border-radius: 1rem; color: #ffffff; font-weight: 700; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.sf-product__sticky-cta-icon { width: 1.25rem; height: 1.25rem; }
.sf-product__modal-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.sf-product__modal-backdrop { position: fixed; inset: 0; background-color: rgb(0 0 0 / 0.5); backdrop-filter: blur(4px); }
.sf-product__modal-panel { position: relative; width: 100%; max-width: 28rem; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); padding: 2rem; background-color: #ffffff; }
.sf-product__modal-panel--dark-border { border: 1px solid currentColor; }
.sf-product__modal-panel--rtl { font-family: Inter, Poppins, "Noto Sans Arabic", sans-serif; }
.sf-product__modal-icon-wrap { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.sf-product__modal-icon-badge { position: relative; margin-inline: auto; display: flex; height: 6rem; width: 6rem; align-items: center; justify-content: center; border-radius: 9999px; background-color: rgb(236 253 245 / 0.95); box-shadow: 0 18px 45px -24px rgba(16,185,129,0.85); }
.sf-product__modal-icon-ring { position: absolute; inset: 0; border-radius: 9999px; border: 1px solid rgb(167 243 208 / 0.8); }
.sf-product__modal-icon-core { position: relative; display: flex; height: 4rem; width: 4rem; align-items: center; justify-content: center; border-radius: 9999px; background-color: #10b981; color: #ffffff; box-shadow: 0 16px 32px -20px rgba(16,185,129,0.9); outline: 1px solid rgb(255 255 255 / 0.7); }
.sf-product__modal-icon-check { height: 2.25rem; width: 2.25rem; }
.sf-product__modal-body { text-align: center; display: flex; flex-direction: column; gap: 0.75rem; }
.sf-product__modal-title { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #0f172a; }
.sf-product__modal-subtitle { color: #475569; font-size: 0.875rem; line-height: 1.25rem; }
.sf-product__modal-actions { margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.sf-product__modal-track-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding-inline: 1.5rem; padding-block: 0.75rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.875rem; line-height: 1.25rem; transition: box-shadow 150ms ease; color: #ffffff; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.sf-product__modal-track-icon { width: 1rem; height: 1rem; }
.sf-product__modal-hint { font-size: 0.75rem; line-height: 1rem; text-align: center; color: #64748b; }
.sf-product__modal-secondary { width: 100%; display: flex; align-items: center; justify-content: center; padding-inline: 1.5rem; padding-block: 0.75rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.875rem; line-height: 1.25rem; transition: background-color 150ms ease; background-color: #f1f5f9; color: #0f172a; }
.sf-product__modal-secondary:hover { background-color: #e2e8f0; }
.sf-product__modal-secondary--elevated { gap: 0.5rem; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.sf-of__row { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 640px) { .sf-of__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sf-of__row--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-of__field > * + * { margin-top: 0.25rem; }
.sf-of__label { font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: #334155; }
.sf-of__required { color: #ef4444; }
.sf-of__input-wrap { position: relative; }
.sf-of__input-icon { position: absolute; inset-inline-start: 0.75rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.sf-of__input-icon--muted { pointer-events: none; }
.sf-of__input-icon-svg { width: 1rem; height: 1rem; }
.sf-of__select-chevron { position: absolute; inset-inline-end: 0.75rem; top: 50%; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.sf-of__input {
width: 100%;
min-height: 2.75rem;
padding-inline: 1rem;
padding-block: 0.625rem;
border-radius: 0.75rem;
border: 1px solid #e2e8f0;
background-color: #f8fafc;
outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease;
text-align: start;
}
.sf-of__input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.sf-of__input:disabled { opacity: 0.5; }
.sf-of__input--error { border-color: #ef4444; }
.sf-of__input--error:focus { border-color: #ef4444; box-shadow: 0 0 0 1px #ef4444; }
.sf-of__input--icon { padding-inline-start: 2.5rem; min-height: 0; }
.sf-of__input--select { padding-inline-start: 2.5rem; padding-inline-end: 2.5rem; min-height: 0; appearance: none; }
.sf-of__error { color: #ef4444; font-size: 0.75rem; line-height: 1rem; margin-top: 0.25rem; }
.sf-of__dtype-label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; color: #1e293b; }
.sf-of__dtype-row { display: flex; gap: 0.75rem; }
.sf-of__dtype-btn {
flex: 1 1 0%;
padding-block: 0.625rem;
padding-inline: 0.75rem;
border-radius: 0.75rem;
font-weight: 600;
font-size: 0.75rem;
line-height: 1rem;
transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
border-width: 2px;
border-style: solid;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
}
.sf-of__dtype-btn--active { border-color: var(--brand); background-color: color-mix(in srgb, var(--brand) 8%, white); color: var(--brand); }
.sf-of__dtype-btn--inactive { border-color: #e2e8f0; color: #475569; }
.sf-of__dtype-btn--inactive:hover { border-color: #cbd5e1; }
.sf-of__dtype-icon { width: 1.25rem; height: 1.25rem; }
.sf-of__custom-fields { display: flex; flex-direction: column; gap: 0.75rem; }
.sf-of__custom-label { display: block; }
.sf-of__custom-label > * + * { margin-top: 0.25rem; }
.sf-of__custom-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.sf-of__custom-check input[type="checkbox"] { inline-size: 1.125rem; block-size: 1.125rem; flex: none; margin: 0; accent-color: var(--color-brand, currentColor); }
.sf-of__custom-price { margin-inline-start: auto; font-size: 0.8125rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; }
.sf-of__char-count { font-size: 0.75rem; line-height: 1rem; color: #94a3b8; text-align: end; }
.sf-of__hint { font-size: 0.75rem; line-height: 1rem; color: #94a3b8; }
.sf-of__bounds-hint { font-size: 0.75rem; line-height: 1rem; color: #94a3b8; }
.sf-footer { border-top: 1px solid #e2e8f0; transition: background-color 150ms ease, border-color 150ms ease; }
.sf-footer--default { margin-top: 5rem; background-color: rgba(248, 250, 252, 0.5); }
.sf-footer--lp { margin-top: 0; background-color: #ffffff; }
.sf-footer--product-padded { padding-bottom: 6rem; }
@media (min-width: 1024px) { .sf-footer--product-padded { padding-bottom: 0; } }
.sf-footer__inner { margin-inline: auto; padding-inline: 1rem; }
.sf-footer__inner--default { max-width: 80rem; padding-block: 3rem; }
.sf-footer__inner--lp { max-width: 35rem; padding-block: 2.5rem; }
.sf-footer__main { margin-bottom: 2rem; }
.sf-footer__brand { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.sf-footer__logo { height: 3.5rem; width: auto; object-fit: contain; }
.sf-footer__name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; color: #0f172a; }
.sf-footer__desc { font-size: 0.875rem; line-height: 1.25rem; color: #475569; margin-bottom: 1rem; }
.sf-footer__social { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.sf-footer__social-link { display: inline-flex; height: 2.75rem; width: 2.75rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid #e2e8f0; background-color: #ffffff; color: #64748b; transition: border-color 150ms ease, color 150ms ease; }
.sf-footer__social-link:hover { border-color: #10b981; color: #10b981; }
.sf-footer__track-wrap { margin-bottom: 1.5rem; text-align: center; }
.sf-footer__track-link { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #475569; transition: color 150ms ease; }
.sf-footer__track-link:hover { color: #059669; }
.sf-footer__copyright { padding-top: 2rem; border-top: 1px solid #e2e8f0; text-align: center; font-size: 0.75rem; line-height: 1rem; color: #475569; }
@media (min-width: 768px) { .sf-footer__copyright { font-size: 0.875rem; line-height: 1.25rem; } }
.sf-footer__copyright-link { font-weight: 600; transition: color 150ms ease; }
.sf-footer__copyright-link:hover { color: #059669; }
.sf-announcement { width: 100%; overflow: hidden; padding-block: 0.625rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #ffffff; }
.sf-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.sf-announcement__text { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; }
.sf-announcement__static {
width: 100%;
margin-inline: auto;
padding-inline: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 640px) { .sf-announcement__static { max-width: 640px; } }
@media (min-width: 768px) { .sf-announcement__static { max-width: 768px; } }
@media (min-width: 1024px) { .sf-announcement__static { max-width: 1024px; } }
@media (min-width: 1280px) { .sf-announcement__static { max-width: 1280px; } }
.sf-announcement__static-text { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; text-align: center; }
.sf-sticky-contact { position: fixed; inset-inline-end: 1rem; z-index: 50; display: flex; flex-direction: column; gap: 0.75rem; }
.sf-sticky-contact--lp { inset-block-end: 6rem; }
.sf-sticky-contact--product { inset-block-end: 5rem; }
@media (min-width: 1024px) { .sf-sticky-contact--product { inset-block-end: 1.5rem; } }
.sf-sticky-contact--default { inset-block-end: 1.5rem; }
.sf-sticky-contact__btn { width: 3rem; height: 3rem; border-radius: 9999px; color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); transition: background-color 150ms ease, transform 150ms ease; }
.sf-sticky-contact__btn:hover { transform: scale(1.1); }
.sf-sticky-contact__btn--phone { background-color: #3b82f6; }
.sf-sticky-contact__btn--phone:hover { background-color: #2563eb; }
.sf-sticky-contact__btn--whatsapp { background-color: #22c55e; }
.sf-sticky-contact__btn--whatsapp:hover { background-color: #16a34a; }
.sf-sticky-contact__icon { width: 1.5rem; height: 1.5rem; }
.sf-of__form { display: flex; flex-direction: column; gap: 0.75rem; }
.sf-of__soldout { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: 9999px; background-color: #dc2626; padding-inline: 0.75rem; padding-block: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; color: #ffffff; }
.sf-of__soldout-icon { width: 0.875rem; height: 0.875rem; }
.sf-of__upsells { display: flex; flex-direction: column; }
.sf-of__upsells > * + * { margin-top: 0.5rem; }
.sf-of__upsells-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.sf-of__upsells-header-icon { width: 1rem; height: 1rem; color: #f59e0b; }
.sf-of__upsells-title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: #0f172a; }
.sf-of__upsell { position: relative; overflow: hidden; padding: 0.75rem; border-width: 2px; border-style: solid; border-radius: 0.75rem; cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
.sf-of__upsell--inactive { border-color: #e2e8f0; }
.sf-of__upsell--inactive:hover { border-color: #cbd5e1; background-color: #f8fafc; }
.sf-of__upsell-tag { position: relative; display: block; width: fit-content; margin-block: -0.75rem 0.5rem; margin-inline-start: auto; margin-inline-end: -0.75rem; border-end-start-radius: 0.75rem; background-image: linear-gradient(to right, #f59e0b, #f97316); color: #ffffff; font-size: 0.75rem; line-height: 1rem; font-weight: 700; padding-inline: 0.75rem; padding-block: 0.375rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); z-index: 10; }
.sf-of__upsell-body { display: flex; align-items: center; gap: 0.75rem; }
.sf-of__upsell-check { width: 1.25rem; height: 1.25rem; border-radius: 9999px; border-width: 2px; border-style: solid; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color 150ms ease, background-color 150ms ease; }
.sf-of__upsell-check--inactive { border-color: #cbd5e1; }
.sf-of__upsell-check-icon { width: 0.75rem; height: 0.75rem; color: #ffffff; }
.sf-of__upsell-content { flex: 1 1 0%; }
.sf-of__upsell-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.sf-of__upsell-left { flex: 1 1 0%; }
.sf-of__upsell-name { font-weight: 700; font-size: 0.875rem; line-height: 1.25rem; color: #0f172a; }
.sf-of__upsell-badges { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.375rem; flex-wrap: wrap; }
.sf-of__upsell-badge--shipping { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.625rem; line-height: 0.75rem; font-weight: 700; padding-inline: 0.5rem; padding-block: 0.125rem; border-radius: 0.25rem; background-color: #dcfce7; color: #15803d; }
.sf-of__upsell-badge-icon { width: 0.625rem; height: 0.625rem; }
.sf-of__upsell-badge--saving { font-size: 0.625rem; line-height: 0.75rem; font-weight: 700; padding-inline: 0.5rem; padding-block: 0.125rem; border-radius: 0.25rem; background-color: #fef3c7; color: #b45309; }
.sf-of__upsell-price-col { flex-shrink: 0; text-align: end; }
.sf-of__upsell-price { font-weight: 900; font-size: 1rem; line-height: 1.5rem; }
.sf-of__upsell-price--best { margin-top: 1rem; }
.sf-of__upsell-compare { font-size: 0.625rem; line-height: 0.75rem; color: #64748b; text-decoration: line-through; }
.sf-of__summary-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; line-height: 1rem; color: #475569; }
.sf-of__summary-value { font-weight: 500; color: #0f172a; }
.sf-of__summary-divider { border-top: 1px dashed #e2e8f0; margin-bottom: 0.25rem; }
.sf-of__summary-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; color: #0f172a; }
.sf-of__summary-total-value { font-size: 1rem; line-height: 1.5rem; }
.sf-of__form-error { font-size: 0.875rem; line-height: 1.25rem; font-weight: 700; text-align: center; color: #b91c1c; background-color: #fee2e2; border-radius: 0.75rem; padding-inline: 1rem; padding-block: 0.75rem; border: 1px solid #fecaca; }
.sf-of__actions { display: flex; gap: 0.5rem; }
.sf-of__add-to-cart { position: relative; flex-shrink: 0; width: 3.25rem; display: flex; align-items: center; justify-content: center; transition: background-color 150ms ease, color 150ms ease; }
.sf-of__add-to-cart:disabled { opacity: 0.5; cursor: not-allowed; }
.sf-of__add-to-cart--light { background-color: #f1f5f9; color: #475569; }
.sf-of__add-to-cart--dark { background-color: #1e293b; color: #cbd5e1; }
.sf-of__add-to-cart-icon { width: 1.25rem; height: 1.25rem; }
.sf-of__add-to-cart-icon--added { color: #10b981; }
.sf-of__add-to-cart-badge { position: absolute; inset-block-start: -0.25rem; inset-inline-end: -0.25rem; min-width: 1.25rem; height: 1.25rem; padding-inline: 0.25rem; border-radius: 9999px; background-color: #ef4444; color: #ffffff; font-size: 0.75rem; line-height: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sf-of__submit { flex: 1 1 0%; padding-block: 0.75rem; font-weight: 700; font-size: 0.875rem; line-height: 1.25rem; transition: box-shadow 150ms ease, transform 150ms ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.sf-of__submit:disabled { opacity: 0.75; cursor: not-allowed; }
.sf-of__submit:hover { transform: translateY(-0.125rem); }
.sf-of__submit-spinner { width: 1.25rem; height: 1.25rem; animation: sf-spin 1s linear infinite; }
.sf-of__submit-spinner-track { opacity: 0.25; }
.sf-of__submit-spinner-fill { opacity: 0.75; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
.sf-lookup { min-height: 100vh; transition: background-color 150ms ease; background-color: #f8fafc; }
.sf-lookup--dark { background-color: #020617; }
.sf-lookup__header { border-bottom: 1px solid #e2e8f0; transition: background-color 150ms ease, border-color 150ms ease; background-color: #ffffff; }
.sf-lookup__header--dark { background-color: #0f172a; border-bottom-color: #1e293b; }
.sf-lookup__header-inner { max-width: 42rem; margin-inline: auto; padding-inline: 1rem; padding-block: 1rem; }
.sf-lookup__logo { display: flex; align-items: center; gap: 0.5rem; }
.sf-lookup__logo-img { height: 2.5rem; width: auto; object-fit: contain; }
.sf-lookup__logo-glyph { flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; }
.sf-lookup__logo-name { font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: #0f172a; }
.sf-lookup__logo-name--dark { color: #ffffff; }
.sf-lookup__main { max-width: 42rem; margin-inline: auto; padding-inline: 1rem; padding-block: 1.5rem; }
@media (min-width: 640px) { .sf-lookup__main { padding-block: 2.5rem; } }
.sf-lookup__heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 0.5rem; color: #0f172a; }
@media (min-width: 640px) { .sf-lookup__heading { font-size: 1.875rem; line-height: 2.25rem; } }
.sf-lookup__heading--dark { color: #ffffff; }
.sf-lookup__intro { margin-bottom: 1.5rem; font-size: 0.875rem; line-height: 1.25rem; color: #64748b; }
.sf-lookup__intro--dark { color: #94a3b8; }
.sf-lookup__dead-link { margin-bottom: 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #334155; }
.sf-lookup__dead-link--dark { color: #cbd5e1; }
.sf-lookup__error { margin-bottom: 1rem; border-radius: 0.75rem; border: 1px solid #fecdd3; padding-inline: 1rem; padding-block: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; background-color: #fff1f2; color: #be123c; }
.sf-lookup__error--dark { background-color: rgba(76, 5, 25, 0.4); border-color: #881337; color: #fecdd3; }
.sf-lookup__error-title { font-weight: 600; }
.sf-lookup__error-hint { margin-top: 0.25rem; color: #be123c; }
.sf-lookup__error-hint--dark { color: #fda4af; }
.sf-lookup__form { border-radius: 1rem; border: 1px solid #e2e8f0; padding: 1rem; transition: background-color 150ms ease, border-color 150ms ease; background-color: #ffffff; }
@media (min-width: 640px) { .sf-lookup__form { padding: 1.25rem; } }
.sf-lookup__form > * + * { margin-top: 1rem; }
.sf-lookup__form--dark { background-color: #0f172a; border-color: #1e293b; }
.sf-lookup__field > * + * { margin-top: 0.25rem; }
.sf-lookup__label { font-size: 0.75rem; line-height: 1rem; font-weight: 700; color: #334155; }
.sf-lookup__label--dark { color: #cbd5e1; }
.sf-lookup__input {
width: 100%;
text-align: start;
padding-inline: 1rem;
padding-block: 0.625rem;
border-radius: 0.75rem;
border: 1px solid #e2e8f0;
background-color: #f8fafc;
outline: none;
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.sf-lookup__input:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.sf-lookup__hint { font-size: 0.75rem; line-height: 1rem; color: #64748b; }
.sf-lookup__hint--dark { color: #94a3b8; }
.sf-lookup__submit { width: 100%; border-radius: 0.75rem; padding-inline: 1rem; padding-block: 0.875rem; color: #ffffff; font-weight: 600; transition: background-color 150ms ease; background-color: var(--brand); }
.sf-lookup__submit:hover { background-color: color-mix(in srgb, var(--brand) 82%, black); }
.sf-lookup__back { margin-top: 1rem; display: block; text-align: center; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #64748b; transition: color 150ms ease; }
.sf-lookup__back:hover { color: #334155; }
.sf-lookup__back--dark { color: #94a3b8; }
.sf-lookup__back--dark:hover { color: #e2e8f0; }
.sf-body { background-color: #f9fafb; color: #0f172a; }
.sf-card__price { color: var(--sf-legacy-brand, #e11d48); }
.sf-card__cta {
background-color: var(--sf-legacy-shopbtn-bg, #e11d48);
color: var(--sf-legacy-shopbtn-fg, #ffffff);
}
.sf-card__cta--soldout {
background-color: #e2e8f0;
color: #475569;
box-shadow: none;
}
.sf-card-wrap:hover .sf-card__cta--soldout,
.sf-card__cta--soldout:hover,
.sf-card__cta--soldout:active {
background-color: #e2e8f0;
color: #475569;
box-shadow: none;
transform: none;
}
.sf-card--legacy-hover { border-color: transparent; }
.sf-card--legacy-hover:hover {
border-color: var(--sf-legacy-brand);
box-shadow: 0 10px 25px -5px var(--sf-legacy-brand-40);
}
.sf-nav__logo-glyph { color: var(--sf-legacy-brand, #e11d48); }
.sf-announcement {
background-color: var(--sf-legacy-announce-bg);
color: var(--sf-legacy-announce-fg, #ffffff);
}
.sf-cart__track-btn { background-color: var(--sf-legacy-brand, #e11d48); }
.sf-cart__continue--filled { background-color: var(--sf-legacy-brand, #e11d48); }
.sf-cart__submit { background-color: var(--sf-legacy-brand, #e11d48); }
.sf-cart-drawer__checkout { background-color: var(--sf-legacy-brand, #e11d48); }
.sf-track__logo-glyph { color: var(--sf-legacy-brand, #e11d48); }
.sf-lookup__logo-glyph { color: var(--sf-legacy-brand, #e11d48); }
.sf-product__gallery-autoplay-dot { background-color: var(--sf-legacy-brand); }
.sf-buybox__price { color: var(--sf-legacy-brand); }
.sf-product__trust-icon--delivery { color: var(--sf-legacy-brand, #3b82f6); }
.sf-product__trust-icon--guarantee { color: var(--sf-legacy-brand, #22c55e); }
.sf-product__trust-icon--return { color: var(--sf-legacy-brand, #a855f7); }
.sf-product__trust-icon--payment { color: var(--sf-legacy-brand, #f59e0b); }
.sf-product__similar-price { color: var(--sf-legacy-brand, #e11d48); }
.sf-product__similar-cta {
background: linear-gradient(to right, var(--sf-legacy-brand, #e11d48), var(--sf-legacy-brand-dd, #e11d48DD));
}
.sf-product__sticky-cta-btn {
background: linear-gradient(to right, var(--sf-legacy-brand), var(--sf-legacy-brand-dd));
box-shadow: 0 10px 25px -5px var(--sf-legacy-brand-66);
}
.sf-product__modal-track-btn { background-color: var(--sf-legacy-brand, #10b981); }
.sf-of {
border-color: var(--sf-legacy-form-border-color);
border-width: var(--sf-legacy-form-border-width);
border-style: solid;
border-radius: var(--sf-legacy-form-radius);
}
.sf-of__upsell--selected {
border-color: var(--sf-legacy-brand);
background-color: var(--sf-legacy-brand-15);
}
.sf-of__upsell-check--selected {
border-color: var(--sf-legacy-brand);
background-color: var(--sf-legacy-brand);
}
.sf-of__upsell-price { color: var(--sf-legacy-brand); }
.sf-of__summary-total-value { color: var(--sf-legacy-brand); }
.sf-of__add-to-cart { border-radius: var(--sf-legacy-checkout-radius); }
.sf-of__submit {
background-color: var(--sf-legacy-checkout-bg);
color: var(--sf-legacy-checkout-fg);
border-radius: var(--sf-legacy-checkout-radius);
box-shadow: 0 8px 25px -5px var(--sf-legacy-brand-4d);
}
@container (max-width: 760px) {
[data-sf-hidden-mobile] { display: none; }
}
.sf-section { padding-block: 16px; }
.sf-richtext { max-width: 65ch; margin-inline: auto; line-height: 1.8; }
.sf-richtext p { margin: 0 0 1em; }
.sf-section--rich-text[data-align="start"] .sf-richtext { text-align: start; }
.sf-section--rich-text[data-align="center"] .sf-richtext { text-align: center; }
.sf-section--rich-text[data-align="end"] .sf-richtext { text-align: end; }
.sf-image-text__row { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
@media (min-width: 768px) {
.sf-image-text__row { flex-direction: row; }
.sf-image-text[data-image-side="end"] .sf-image-text__row { flex-direction: row-reverse; }
}
.sf-image-text__media { flex: 1 1 50%; min-width: 0; }
.sf-image-text__media img { width: 100%; height: auto; border-radius: 1rem; }
.sf-image-text__body { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.sf-image-text__heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #0f172a; margin: 0; }
.sf-image-text__text { color: #475569; line-height: 1.7; }
.sf-image-text__text p { margin: 0 0 1em; }
.sf-image-text__cta {
display: inline-flex; align-items: center; justify-content: center; width: fit-content;
border-radius: 0.75rem; padding: 0.75rem 1.5rem; font-weight: 700;
background-color: var(--brand); color: #fff;
}
.sf-image-text__cta:hover { background-color: color-mix(in srgb, var(--brand) 82%, black); }
.sf-features__heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: #0f172a; }
.sf-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; }
.sf-features__item { display: flex; flex-direction: column; gap: 0.5rem; text-align: start; }
.sf-features__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 2.75rem; height: 2.75rem; border-radius: 9999px;
background-color: rgba(226, 232, 240, 0.6); color: var(--brand);
}
.sf-features__title { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0; }
.sf-features__text { font-size: 0.875rem; color: #64748b; margin: 0; }
.sf-faq { max-width: 65ch; margin-inline: auto; }
.sf-faq__heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1rem; color: #0f172a; }
.sf-faq__list { display: flex; flex-direction: column; gap: 0.75rem; }
.sf-faq__item { border: 1px solid #e2e8f0; border-radius: 0.75rem; padding: 1rem 1.25rem; background-color: rgba(255, 255, 255, 0.5); }
.sf-faq__question { cursor: pointer; font-weight: 700; color: #0f172a; }
.sf-faq__answer { margin-top: 0.75rem; color: #475569; line-height: 1.7; }
.sf-faq__answer p { margin: 0 0 1em; }
.sf-testimonials__heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: #0f172a; }
.sf-testimonials__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.sf-testimonials__card {
border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1.5rem;
background-color: rgba(255, 255, 255, 0.5); display: flex; flex-direction: column; gap: 0.5rem;
}
.sf-testimonials__rating { display: flex; gap: 0.125rem; color: #f59e0b; }
.sf-testimonials__quote { color: #334155; line-height: 1.6; margin: 0; }
.sf-testimonials__author { font-size: 0.875rem; font-weight: 700; color: #0f172a; margin: 0; }
.sf-video__heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1rem; color: #0f172a; }
.sf-video__frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 1rem; overflow: hidden; background-color: #000; }
.sf-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-slideshow__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 1rem; }
.sf-slideshow__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-height: 22rem; display: flex; align-items: flex-end; overflow: hidden; background-color: #f1f5f9; }
.sf-slideshow__media { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sf-slideshow__media--empty { background-color: #f1f5f9; }
.sf-slideshow__overlay { position: relative; z-index: 1; width: 100%; padding: 1.5rem; background: linear-gradient(to top, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0)); color: #fff; }
.sf-slideshow__heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin: 0 0 0.25rem; }
.sf-slideshow__subheading { margin: 0 0 0.75rem; font-size: 0.9375rem; }
.sf-slideshow__cta { display: inline-block; padding: 0.5rem 1.25rem; border-radius: 0.5rem; background-color: #fff; color: #0f172a; text-decoration: none; font-weight: 700; }
.sf-order-steps__heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 1.5rem; color: #0f172a; }
.sf-order-steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.sf-order-steps__item { display: flex; flex-direction: column; gap: 0.75rem; text-align: start; }
.sf-order-steps__number { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px; background-color: var(--brand); color: #fff; font-weight: 700; }
.sf-order-steps__title { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0; }
.sf-order-steps__text { font-size: 0.875rem; color: #64748b; margin: 0; }
.sf-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.sf-gallery__item { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.sf-gallery__item img { width: 100%; height: auto; border-radius: 0.5rem; display: block; }
.sf-gallery__caption { font-size: 0.875rem; color: #64748b; text-align: center; }
.sf-contact { max-width: 40rem; margin-inline: auto; text-align: center; }
.sf-contact__heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; margin-bottom: 0.5rem; color: #0f172a; }
.sf-contact__text { color: #475569; line-height: 1.7; margin: 0 0 1.5rem; }
.sf-contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.sf-contact__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 0.5rem; font-weight: 700; text-decoration: none; }
.sf-contact__cta--whatsapp { background-color: #25d366; color: #fff; }
.sf-contact__cta--phone { background-color: var(--brand); color: #fff; }
.sf-order-steps__list { counter-reset: sf-step; }
.sf-order-steps__item { counter-increment: sf-step; }
.sf-order-steps__number::before { content: counter(sf-step); }
.sf-hero,
.sf-band { padding-block: 16px; }
.sf-sections > .sf-section,
.sf-sections > .sf-hero,
.sf-sections > .sf-band,
.sf-sections > .sf-featured-product,
.sf-sections > .sf-catalog-section-empty { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
.sf-sections > :has(> .sf-collection-strip) { max-width: 80rem; margin-inline: auto; padding-inline: 1rem; }
.sf-hero__inner {
display: grid;
gap: 1.5rem;
align-items: center;
padding: 2rem 1.25rem;
border-radius: 1.5rem;
border: 1px solid #e2e8f0;
background-image: linear-gradient(to bottom right, #f8fafc, #ffffff, #f1f5f9);
}
@media (min-width: 768px) {
.sf-hero__inner { padding: 3rem; gap: 2.5rem; }
.sf-hero--art .sf-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.sf-hero__say { min-width: 0; }
.sf-hero__eyebrow {
display: inline-block;
margin-bottom: 1rem;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
background-color: color-mix(in srgb, var(--brand) 12%, transparent);
color: var(--brand);
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
}
.sf-hero__heading {
margin: 0;
font-size: 1.875rem;
line-height: 2.375rem;
font-weight: 800;
color: #0f172a;
}
@media (min-width: 768px) { .sf-hero__heading { font-size: 2.75rem; line-height: 3.25rem; } }
.sf-hero__heading-em { display: block; font-style: normal; color: var(--brand); }
.sf-hero__body {
margin: 1rem 0 0;
max-width: 40rem;
color: #475569;
font-size: 1rem;
line-height: 1.75;
}
.sf-hero__cta,
.sf-band__cta {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1.5rem;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-weight: 700;
text-decoration: none;
}
.sf-hero__cta { background-color: var(--brand); color: #ffffff; }
.sf-hero__cta:hover { background-color: color-mix(in srgb, var(--brand) 82%, black); }
.sf-hero__art,
.sf-band__art { min-width: 0; }
.sf-hero__pad,
.sf-band__pad {
display: flex;
justify-content: center;
border-radius: 1rem;
overflow: hidden;
background-color: #f1f5f9;
}
.sf-hero__pad img,
.sf-band__pad img { display: block; width: 100%; height: auto; }
.sf-band__inner {
display: grid;
gap: 1.5rem;
align-items: center;
padding: 2rem 1.25rem;
border-radius: 1.5rem;
background-color: #0f172a;
color: #ffffff;
}
@media (min-width: 768px) {
.sf-band__inner { padding: 2.5rem 3rem; gap: 2.5rem; }
.sf-band--art .sf-band__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.sf-band__say { min-width: 0; }
.sf-band__eyebrow {
display: inline-block;
margin-bottom: 0.75rem;
color: color-mix(in srgb, var(--brand) 55%, #ffffff);
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
}
.sf-band__heading {
margin: 0;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 800;
color: #ffffff;
}
@media (min-width: 768px) { .sf-band__heading { font-size: 2rem; line-height: 2.5rem; } }
.sf-band__heading-em { display: block; font-style: normal; color: color-mix(in srgb, var(--brand) 55%, #ffffff); }
.sf-band__body { margin: 0.75rem 0 0; max-width: 40rem; color: #cbd5e1; line-height: 1.75; }
.sf-band__cta { background-color: #ffffff; color: #0f172a; }
.sf-band__cta:hover { background-color: #f1f5f9; }
.sf-band__pad { background-color: #1e293b; }
.sf-bnav { display: none; }
.sf-bnav__item { display: none; }
.sf-bnav__icon { width: 1.25rem; height: 1.25rem; }
.sf-bnav__label { font-size: 0.625rem; line-height: 1rem; }
.sf-bnav__cart-count { display: none; }
.sf-bnav__raise { display: none; }
.sf-nav__bag {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 9999px;
color: #0f172a;
background-color: transparent;
transition: background-color 150ms ease, color 150ms ease;
}
.sf-nav__bag:hover { background-color: #f1f5f9; }
.sf-nav--dark .sf-nav__bag { color: #ffffff; }
.sf-nav--dark .sf-nav__bag:hover { background-color: #1e293b; }
.sf-nav__bag-icon { width: 1.375rem; height: 1.375rem; }
.sf-nav__bag-count {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
min-width: 1.125rem;
height: 1.125rem;
padding-inline: 0.25rem;
border-radius: 9999px;
background-color: #ef4444;
color: #ffffff;
font-size: 0.6875rem;
line-height: 1rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.sf-footer__cols {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
text-align: center;
}
.sf-footer__col {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
color: #475569;
text-decoration: none;
transition: color 150ms ease;
}
.sf-footer__col:hover { color: #059669; }
.sf-success__whatsapp {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding-inline: 1.5rem;
padding-block: 0.75rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.875rem;
line-height: 1.25rem;
text-decoration: none;
background-color: #25d366;
color: #ffffff;
transition: background-color 150ms ease;
}
.sf-success__whatsapp:hover { background-color: #1da851; }
.sf-success__whatsapp-icon { width: 1.125rem; height: 1.125rem; }
.sf-product__sticky-add {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3.25rem;
height: 3.25rem;
border-radius: 1rem;
border: 1px solid #e2e8f0;
background-color: #ffffff;
color: #0f172a;
transition: background-color 150ms ease, border-color 150ms ease;
}
.sf-product__sticky-add:hover { background-color: #f1f5f9; }
.sf-product__sticky-add:disabled { opacity: 0.5; cursor: not-allowed; }
.sf-product__sticky-add-icon { width: 1.25rem; height: 1.25rem; }
.sf-layout-align-center { text-align: center; }
.sf-layout-align-end    { text-align: end; }
.sf-layout-bg-tint     { background-color: #f1f5f9; }
.sf-layout-bg-contrast {
background-color: #0f172a;
color: #ffffff;
--sf-focus: #ffffff;
}
.sf-layout-bg-contrast :is(h1, h2, h3, h4, h5, h6, p, li, dt, dd, summary, blockquote, figcaption):not(.sf-card *, .sf-faq__item *, .sf-testimonials__card *, .sf-video__frame *, .sf-hero__inner *),
.sf-layout-bg-contrast :is(p, li, dd, blockquote):not(.sf-card *, .sf-faq__item *, .sf-testimonials__card *, .sf-video__frame *, .sf-hero__inner *) a {
color: #ffffff;
}
.sf-layout-space-compact  { padding-block: 8px; }
.sf-layout-space-spacious { padding-block: 28px; }
.sf-layout-space-compact  > .sf-collection-strip,
.sf-layout-space-spacious > .sf-collection-strip { padding-block: 0; }
.sf-layout-space-compact:has(> .sf-product__description) { padding-block: 0; }
.sf-section-similar-products.sf-layout-space-compact { padding-block: 0; }
.sf-layout-space-compact > .sf-product__description:first-child { padding-top: .75rem; }
.sf-section-similar-products.sf-layout-space-compact > .sf-product__similar { margin-top: 1.5rem; }
.sf-of__unit-card {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.5rem 0;
align-items: center;
min-width: 0;
padding: 0.625rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: transparent;
}
.sf-of__unit-thumb {
inline-size: 3.5rem;
block-size: 3.5rem;
margin-inline-end: 0.75rem;
overflow: hidden;
border-radius: calc(0.75rem / 2);
background: color-mix(in srgb, currentColor 6%, transparent);
}
.sf-of__unit-thumb img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.sf-of__unit-head {
grid-column: 2 / -1;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.25rem 0.5rem;
min-width: 0;
}
.sf-of__unit-price {
font-size: 0.875rem;
font-weight: 700;
white-space: nowrap;
}
.sf-of__unit-selects {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
min-width: 0;
}
.sf-of__unit-selects .sf-variant-select-wrap {
flex: 1 1 8rem;
min-width: 0;
}
.sf-of__piece-note {
grid-column: 1 / -1;
margin: 0;
padding: 0.375rem 0.5rem;
border-radius: calc(0.75rem / 2);
background: color-mix(in srgb, #f59e0b 18%, transparent);
color: inherit;
font-size: 0.8125rem;
line-height: 1.25rem;
}
.sf-of__unit-summary {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin: 0;
padding-block: 0.5rem 0;
padding-inline: 0;
border-block-start: 1px dashed #e2e8f0;
list-style: none;
font-size: 0.875rem;
}
.sf-of__unit-summary-line {
display: flex;
justify-content: space-between;
gap: 0.5rem;
min-width: 0;
}
.sf-of__unit-summary-qty {
font-weight: 700;
white-space: nowrap;
}
@media (pointer: coarse) {
.sf-body input,
.sf-body select,
.sf-body textarea {
font-size: 16px;
}
}