:root {
--bg: #fbf7f9;
--card: #ffffff;
--text: #1f2030;
--muted: #706979;
--line: #e6d3e3;
--soft: #f8f0f7;
--soft-2: #f3e9f2;
--brand: #f62780;
--brand-2: #5a1a93;
--green: #14a34a;
--shadow: 0 10px 28px rgba(79, 40, 74, 0.08);
--radius: 18px;
--container: 1280px;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Arial,
sans-serif;
background: var(--bg);
color: var(--text);
}
body.locked {
overflow: hidden;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
display: block;
}
button,
input,
select,
textarea {
font: inherit;
}
button {
cursor: pointer;
}
.container {
width: min(var(--container), calc(100% - 32px));
margin: 0 auto;
}
.page-pad {
padding: 22px 0 34px;
}
.section {
padding: 24px 0;
}
.topbar {
background: linear-gradient(90deg, var(--brand-2), #5a1a93);
color: #fff;
font-size: 14px;
}
.topbar-inner {
display: flex;
justify-content: space-between;
align-items: center;
min-height: 40px;
gap: 12px;
}
.topbar-left,
.topbar-right {
display: flex;
gap: 10px;
align-items: center;
white-space: nowrap;
}
.sep {
opacity: 0.5;
}
.header-main {
background: #fff;
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
z-index: 40;
}
.header-row {
display: grid;
grid-template-columns: 240px 1fr 200px;
gap: 18px;
align-items: center;
padding: 10px 0;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-weight: 800;
color: #5a1a93;
font-size: 22px;
}
.logo-mark {
width: 40px;
height: 40px;
border-radius: 12px;
background: radial-gradient(
circle at 35% 35%,
#ffd7ea 0,
#ff92c3 42%,
#9f5091 100%
);
box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.72);
}
.search {
display: flex;
align-items: center;
border: 1px solid var(--line);
border-radius: 14px;
overflow: hidden;
background: #fff;
}
.search input {
flex: 1;
border: 0;
outline: none;
padding: 14px 16px;
font-size: 16px;
background: #fff;
}
.search button {
width: 46px;
height: 46px;
border: 0;
background: #f62780;
color: #fff;
}
.header-actions {
display: flex;
justify-content: flex-end;
gap: 16px;
align-items: center;
}
.icon-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 16px;
color: #363347;
}
.icon-btn .badge {
position: absolute;
top: -8px;
right: -10px;
background: var(--brand);
color: #fff;
border-radius: 999px;
min-width: 18px;
height: 18px;
padding: 0 5px;
display: grid;
place-items: center;
font-size: 11px;
}
.navbar {
background: #f2e2ee;
border-top: 1px solid var(--line);
}
.navbar .container {
display: flex;
gap: 22px;
min-height: 46px;
align-items: center;
overflow: auto;
scrollbar-width: none;
}
.navbar .container::-webkit-scrollbar {
display: none;
}
.navbar a {
white-space: nowrap;
color: #4a4658;
font-weight: 600;
font-size: 15px;
}
.navbar a.active,
.breadcrumb span,
.pink {
color: var(--brand);
font-weight: 700;
}
.breadcrumb {
font-size: 14px;
color: #7a7482;
margin-bottom: 14px;
}
.hero-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 22px;
}
.hero-card,
.card,
.panel,
.soft-panel {
background: var(--card);
border: 1px solid var(--line);
border-radius: 24px;
box-shadow: var(--shadow);
}
.hero-card {
padding: 24px;
background: linear-gradient(135deg, #fff, #fdeff6);
}
.hero-copy h1 {
font-size: 44px;
line-height: 1.06;
margin: 10px 0 12px;
}
.hero-copy p {
font-size: 16px;
color: var(--muted);
max-width: 480px;
}
.badge-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border: 1px solid #d7a5cc;
border-radius: 999px;
background: #fff;
color: var(--brand);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.cta-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 22px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
padding: 14px 22px;
font-weight: 700;
border: 1px solid transparent;
}
.btn-primary {
background: linear-gradient(90deg, var(--brand), var(--brand-2));
color: #fff;
}
.btn-secondary {
background: #fff;
color: #302d39;
border-color: #ddd0d9;
}
.btn-soft {
background: #f2edf4;
color: #544d5f;
border-color: #e4d6e4;
}
.hero-visual {
min-height: 410px;
position: relative;
display: grid;
place-items: center;
overflow: hidden;
}
.bokeh {
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 18% 25%,
rgba(255, 165, 201, 0.46),
transparent 20%
),
radial-gradient(
circle at 73% 18%,
rgba(255, 194, 219, 0.45),
transparent 16%
),
radial-gradient(
circle at 84% 70%,
rgba(255, 159, 197, 0.34),
transparent 18%
),
linear-gradient(135deg, #fff, #fdebf4);
}
.bouquet-art {
position: relative;
width: min(480px, 95%);
aspect-ratio: 1/1;
}
.bouquet-art svg,
.prod-svg {
width: 100%;
height: 100%;
display: block;
filter: drop-shadow(0 12px 18px rgba(118, 67, 105, 0.16));
}
.stat-strip {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
margin-top: 18px;
}
.stat-item {
padding: 16px 14px;
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
text-align: center;
font-size: 13px;
color: #6d6674;
}
.stat-item strong {
display: block;
color: #2b2835;
margin-top: 4px;
}
.occasion-row,
.product-row,
.plan-grid,
.tile-grid,
.mini-grid {
display: grid;
gap: 14px;
}
.occasion-row {
grid-template-columns: repeat(6, 1fr);
}
.occasion-card,
.product-card,
.category-card,
.mini-card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
}
.occasion-card {
padding: 14px;
text-align: center;
}
.oc-ico {
width: 58px;
height: 58px;
margin: 0 auto 10px;
border-radius: 50%;
background: linear-gradient(135deg, #fff, #ffe6f1);
display: grid;
place-items: center;
border: 1px solid var(--line);
font-size: 26px;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: end;
gap: 12px;
margin-bottom: 14px;
}
.section-head h2 {
margin: 0;
font-size: 28px;
}
.section-head p {
margin: 4px 0 0;
color: var(--muted);
}
.product-row {
grid-template-columns: repeat(5, 1fr);
}
.product-card {
padding: 12px;
}
.product-thumb {
aspect-ratio: 1/1;
border-radius: 16px;
background: linear-gradient(180deg, #fff, #f8eef4);
border: 1px solid #f3e3eb;
display: grid;
place-items: center;
overflow: hidden;
}
.prod-svg {
width: 92%;
height: 92%;
}
.product-card h4 {
margin: 12px 0 6px;
font-size: 15px;
line-height: 1.35;
min-height: 40px;
}
.price {
font-weight: 800;
font-size: 18px;
}
.meta {
font-size: 12px;
color: #726c7b;
margin-top: 4px;
}
.tag {
position: absolute;
top: 10px;
right: 10px;
background: #ff5f88;
color: #fff;
border-radius: 999px;
padding: 6px 10px;
font-size: 11px;
font-weight: 800;
}
.thumb-wrap {
position: relative;
}
.banner-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 18px;
}
.banner {
padding: 18px;
background: linear-gradient(135deg, #fff, #fbf0f8);
border-radius: 18px;
border: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.banner h3 {
margin: 0 0 8px;
font-size: 18px;
}
.banner p {
margin: 0;
color: var(--muted);
font-size: 14px;
}
.listing-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 22px;
}
.sidebar {
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
padding: 18px;
height: max-content;
}
.filter-group {
padding-bottom: 16px;
margin-bottom: 16px;
border-bottom: 1px solid #f2e3eb;
}
.filter-group:last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: 0;
}
.filter-group h4 {
margin: 0 0 14px;
font-size: 16px;
}
.filter-group label {
display: flex;
gap: 10px;
align-items: center;
margin: 10px 0;
color: #555062;
}
.sortbar {
display: flex;
justify-content: space-between;
align-items: start;
gap: 14px;
margin-bottom: 12px;
}
.sort-select,
.select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
textarea {
width: 100%;
padding: 14px 16px;
border: 1px solid #d8d9e2;
border-radius: 14px;
background: #fff;
outline: none;
}
.select:focus,
textarea:focus,
input:focus {
border-color: #ae4b95;
}
.listing-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
}
.product-page {
display: grid;
grid-template-columns: 68px minmax(320px, 480px) minmax(360px, 1fr);
gap: 18px;
align-items: start;
}
.gallery-rail {
display: grid;
gap: 10px;
}
.gallery-thumb {
height: 84px;
border: 1px solid #d9dbe5;
border-radius: 4px;
background: #fff;
display: grid;
place-items: center;
overflow: hidden;
cursor: pointer;
}
.gallery-thumb.active {
outline: 2px solid #f62780;
}
.main-visual {
background: #fff;
border-radius: 4px;
}
.visual-wrap {
border: 1px solid #d9dbe5;
height: 420px;
background: #fff;
display: grid;
place-items: center;
padding: 14px;
}
.visual-wrap .prod-svg {
width: 100%;
height: 100%;
}
.product-summary .title {
font-size: 20px;
margin: 0 0 6px;
}
.price-box {
border: 1px solid #d9dbe5;
border-radius: 4px;
padding: 10px 12px;
}
.price-box .amount {
font-size: 18px;
font-weight: 800;
}
.price-box .tax {
font-size: 11px;
}
.variant-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 12px 0;
}
.variant-card {
border: 1px solid #d9dbe5;
border-radius: 4px;
padding: 8px;
min-height: 92px;
background: #fff;
}
.variant-card.active {
border-color: #b54b98;
}
.variant-card .thumb {
height: 44px;
background: #faf8fb;
border: 1px solid #ece7ef;
border-radius: 3px;
display: grid;
place-items: center;
margin-bottom: 6px;
}
.variant-card .thumb .prod-svg {
width: 92%;
height: 92%;
}
.cta-wide {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 10px;
}
.promo-thin {
border: 1px solid #d9dbe5;
border-radius: 4px;
padding: 8px 10px;
font-size: 12px;
margin-top: 8px;
}
.accordion-lite {
display: grid;
gap: 12px;
margin-top: 14px;
}
.acc-lite {
border: 1px solid #d9dbe5;
border-radius: 6px;
padding: 0;
background: #fff;
overflow: hidden;
}
.acc-lite .head {
font-weight: 800;
padding: 14px 14px;
border-bottom: 1px solid #edf0f5;
}
.acc-lite .body {
padding: 12px 14px;
font-size: 13px;
color: #2f3040;
}
.acc-lite.blue {
background: #f6f9ff;
border-color: #bdd4ff;
}
.acc-lite.green {
background: #f0fff5;
border-color: #bfe7c9;
}
.acc-lite.orange {
background: #fff7ec;
border-color: #f5c98c;
}
.addon-head {
padding: 32px 0 20px;
background: #f4f7fb;
border-bottom: 1px solid #e7e8ef;
}
.recommend-pill {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(90deg, #f62780, #5a1a93);
color: #fff;
padding: 16px 32px;
border-radius: 999px;
font-weight: 800;
box-shadow: var(--shadow);
}
.addon-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 24px;
padding: 26px 0 20px;
}
.addon-card {
background: #fff;
border: 1px solid #dadde6;
border-radius: 16px;
padding: 18px;
}
.addon-card .product-thumb {
aspect-ratio: 1/0.95;
border-color: #ececf1;
}
.qty {
display: inline-grid;
grid-template-columns: 34px 44px 34px;
border: 1px solid #d6d8df;
border-radius: 8px;
overflow: hidden;
margin-top: 14px;
}
.qty button {
border: 0;
background: #f6f7fb;
}
.qty span {
display: grid;
place-items: center;
font-weight: 700;
}
.sticky-checkout {
position: sticky;
bottom: 0;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(8px);
border: 1px solid #e2e4eb;
border-radius: 18px;
padding: 22px;
margin: 12px 0 24px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
box-shadow: var(--shadow);
}
.base-item {
padding: 14px 16px;
border: 1px solid #bfd4ff;
background: #edf4ff;
color: #2c58c7;
border-radius: 12px;
font-weight: 700;
}
.checkout-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 22px;
}
.checkout-card,
.summary-card,
.feature-card,
.form-card,
.status-card {
background: #fff;
border: 1px solid #e5e7ef;
border-radius: 16px;
}
.checkout-card {
padding: 26px;
}
.summary-card {
padding: 28px;
}
.title-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
}
.title-row h2,
.summary-card h2,
.panel h2 {
margin: 0;
font-size: 24px;
}
.date-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 18px 0;
}
.date-tile {
border: 1px solid #d7dbe5;
border-radius: 14px;
padding: 14px;
text-align: center;
background: #fff;
}
.date-tile.active {
background: #f62780;
color: #fff;
border-color: #f62780;
box-shadow: var(--shadow);
}
.field-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.field-label {
display: block;
font-size: 13px;
color: #f62780;
margin: 0 0 6px 10px;
background: var(--card);
width: max-content;
padding: 0 10px;
transform: translateY(11px);
}
textarea {
min-height: 138px;
resize: vertical;
}
.note-line {
display: flex;
justify-content: space-between;
color: #60677a;
font-size: 13px;
margin-top: 10px;
}
.actions-end {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 20px;
}
.summary-item {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 14px;
margin-bottom: 22px;
}
.summary-item .thumb {
width: 72px;
height: 72px;
border-radius: 10px;
overflow: hidden;
background: #f4f1f7;
}
.summary-lines {
border-top: 1px solid #e6e7ef;
margin-top: 18px;
padding-top: 18px;
display: grid;
gap: 10px;
}
.line-flex {
display: flex;
justify-content: space-between;
gap: 16px;
}
.line-flex.total {
font-size: 22px;
font-weight: 800;
color: #111625;
}
.coupon-box {
margin-top: 18px;
padding: 18px;
border-radius: 12px;
background: #f7f7fb;
border: 1px solid #eceef3;
display: flex;
justify-content: space-between;
align-items: center;
}
.page-two-col {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 18px;
}
.panel {
padding: 26px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 18px;
}
.feature-card {
padding: 18px;
border-color: #f3cadb;
}
.feature-card h3 {
font-size: 18px;
margin: 8px 0;
}
.mini-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-top: 18px;
}
.mini-card {
padding: 14px;
}
.mini-card h3 {
margin: 0 0 6px;
}
.plan-grid {
grid-template-columns: 1.05fr 0.95fr;
}
.plan-visual {
border-radius: 22px;
overflow: hidden;
border: 1px solid #d7a5cc;
background: #fff;
}
.plan-visual img,
.full-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.plan-body {
padding: 18px;
}
.kpi-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 14px 0;
}
.kpi {
border: 1px solid #f0cadb;
border-radius: 16px;
padding: 14px;
background: #fbf5fb;
}
.choice-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.choice-card {
border: 1px solid #edcddd;
border-radius: 14px;
padding: 14px;
background: #fff;
}
.chip-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
.chip {
padding: 8px 12px;
border-radius: 999px;
border: 1px solid #f0cadb;
background: #fff;
font-size: 13px;
}
.chip.active {
background: #f4e5f1;
color: var(--brand);
border-color: #c98dbd;
}
.sub-product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 14px;
}
.sub-product {
border: 1px solid #ecbfd4;
border-radius: 16px;
padding: 10px;
}
.sub-product .product-thumb {
aspect-ratio: 0.8/1;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.status-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 20px 0;
}
.step {
padding: 14px;
border: 1px solid #d7a5cc;
border-radius: 16px;
text-align: center;
font-weight: 700;
color: #ff4f8e;
background: #fff;
}
.step.muted {
color: #333;
background: #fff;
border-color: #e7dbe2;
}
.timeline {
display: grid;
gap: 14px;
}
.timeline .item,
.snapshot-box {
padding: 16px;
border-radius: 16px;
background: #fcf4f7;
border: 1px solid #f0dde7;
}
.result-card {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px;
padding: 14px;
border: 1px solid #f1d2df;
border-radius: 18px;
background: #fff;
}
.footer {
border-top: 1px solid var(--line);
background: #fff;
margin-top: 28px;
}
.footer .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 38px 0;
}
.mobile-only {
display: none;
}
.desktop-only {
display: block;
}
.location-overlay {
position: fixed;
inset: 0;
background: rgba(78, 45, 73, 0.28);
backdrop-filter: blur(9px);
z-index: 100;
display: grid;
place-items: center;
padding: 20px;
}
.location-modal {
width: min(1160px, 100%);
background: #fff;
border-radius: 30px;
overflow: hidden;
border: 1px solid #edd4e1;
box-shadow: 0 40px 80px rgba(57, 33, 53, 0.18);
}
.location-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 28px 32px;
border-bottom: 1px solid #eed9e3;
}
.location-head h2 {
margin: 0;
font-size: 34px;
}
.close-x {
width: 62px;
height: 62px;
border: 1px solid #efd3e1;
border-radius: 18px;
display: grid;
place-items: center;
font-size: 28px;
color: #8b7d85;
background: #fff;
cursor: pointer;
}
.location-body {
padding: 28px 32px 32px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
}
.city-pills {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 22px;
}
.city-pill {
height: 74px;
border: 1px solid #efbfd4;
background: #fff;
border-radius: 24px;
display: grid;
place-items: center;
font-size: 22px;
color: #363341;
cursor: pointer;
}
.city-pill.active {
background: #fbf3f7;
}
.location-actions {
display: flex;
justify-content: flex-end;
margin-top: 24px;
}
.location-actions .btn {
min-width: 200px;
padding: 16px 24px;
border-radius: 18px;
font-size: 18px;
}
@media (max-width: 1100px) {
.header-row {
grid-template-columns: 210px 1fr auto;
}
.hero-grid,
.listing-layout,
.checkout-layout,
.page-two-col,
.plan-grid,
.product-page {
grid-template-columns: 1fr;
}
.product-page {
gap: 14px;
}
.gallery-rail {
display: flex;
order: 2;
}
.gallery-thumb {
width: 74px;
height: 74px;
}
.main-visual {
order: 1;
}
.product-summary {
order: 3;
}
.stat-strip,
.occasion-row,
.banner-row,
.feature-grid,
.mini-stats,
.kpi-row,
.sub-product-grid,
.listing-grid,
.addon-grid,
.product-row {
grid-template-columns: repeat(2, 1fr);
}
.field-grid,
.form-grid {
grid-template-columns: 1fr;
}
.summary-card {
order: 2;
}
}
@media (max-width: 768px) {
.container {
width: min(var(--container), calc(100% - 20px));
}
.topbar {
display: none;
}
.header-row {
grid-template-columns: 1fr auto;
grid-template-areas: "logo actions" "search search";
gap: 12px;
padding: 10px 0;
}
.logo {
grid-area: logo;
font-size: 18px;
}
.search {
grid-area: search;
}
.header-actions {
grid-area: actions;
gap: 10px;
}
.label-hide {
display: none;
}
.navbar .container {
gap: 16px;
min-height: 42px;
}
.hero-grid {
display: block;
}
.hero-card {
padding: 18px;
}
.hero-copy h1 {
font-size: 30px;
}
.hero-visual,
.banner-row,
.desktop-banner,
.desktop-only {
display: none !important;
}
.stat-strip,
.occasion-row,
.product-row,
.listing-grid,
.feature-grid,
.mini-stats,
.addon-grid,
.sub-product-grid {
grid-template-columns: 1fr 1fr;
}
.section-head h2 {
font-size: 24px;
}
.sidebar {
display: none;
}
.sortbar {
display: block;
}
.sortbar .sort-select {
margin-top: 10px;
}
.location-modal {
border-radius: 22px;
}
.location-head {
padding: 20px;
}
.location-head h2 {
font-size: 24px;
}
.close-x {
width: 52px;
height: 52px;
font-size: 22px;
}
.location-body {
padding: 20px;
}
.form-row,
.city-pills {
grid-template-columns: 1fr;
}
.city-pill {
height: 62px;
font-size: 18px;
}
.location-actions .btn {
width: 100%;
}
.date-options {
grid-template-columns: 1fr;
}
.sticky-checkout {
flex-direction: column;
align-items: stretch;
}
.footer .container {
display: block;
padding: 26px 0;
}
}
@media (max-width: 520px) {
.stat-strip,
.occasion-row,
.product-row,
.listing-grid,
.sub-product-grid,
.addon-grid {
grid-template-columns: 1fr;
}
.variant-strip {
grid-template-columns: repeat(2, 1fr);
}
.cta-wide {
grid-template-columns: 1fr;
}
.summary-item {
grid-template-columns: 60px 1fr;
}
.summary-item > :last-child {
grid-column: 2;
}
}
.location-overlay[hidden] {
display: none !important;
}
.field-title {
font-weight: 700;
margin: 0 0 10px;
}
body {
font-family:
Inter,
ui-sans-serif,
system-ui,
-apple-system,
Segoe UI,
Roboto,
Arial,
sans-serif;
}
.header-row {
display: grid;
grid-template-columns: 210px minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
padding: 10px 0;
}
.header-search-wrap {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
}
.location-trigger {
height: 48px;
padding: 0 16px;
border: 1px solid var(--line);
background: #fff;
border-radius: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
color: #50495a;
font-weight: 700;
}
.location-pin,
.location-text,
.search-icon,
.ai-assistant-trigger span {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.search-modern {
display: flex;
align-items: center;
height: 48px;
border: 1px solid var(--line);
border-radius: 18px;
padding: 0 14px;
background: #fff;
overflow: hidden;
}
.search-modern input {
padding: 0;
border: none;
outline: none;
min-width: 0;
flex: 1;
background: transparent;
}
.search-modern button {
display: none;
}
.ai-assistant-trigger {
width: 48px;
height: 48px;
border-radius: 16px;
border: 1px solid var(--line);
background: linear-gradient(180deg, #f8edf6, #ead4e5);
display: grid;
place-items: center;
}
.nav-pill {
padding: 10px 18px;
border-radius: 16px;
background: #f3e3ef;
color: var(--brand) !important;
font-weight: 700;
}
.hero-grid-refined {
display: grid;
grid-template-columns: minmax(0, 1.15fr) 0.85fr;
gap: 22px;
}
.hero-card-image {
padding: 0;
display: grid;
grid-template-columns: minmax(300px, 370px) minmax(0, 1fr);
min-height: 380px;
overflow: hidden;
background: #fff;
border: 1px solid var(--line);
border-radius: 24px;
box-shadow: var(--shadow);
}
.hero-copy-image {
padding: 28px 22px 28px 30px;
display: flex;
flex-direction: column;
justify-content: center;
background: linear-gradient(180deg, #fffdfd, #fff7fa);
}
.hero-copy-image h1 {
font-size: 34px;
line-height: 1.08;
margin: 14px 0 12px;
}
.hero-copy-image p {
max-width: 310px;
}
.hero-image-side {
position: relative;
min-height: 380px;
background: linear-gradient(180deg, #fbf5fb, #ffe7f1);
}
.hero-banner-photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.why-panel {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.why-grid {
grid-template-columns: 1fr 1fr;
}
.photo-fit {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-thumb {
background: #fff;
}
.gallery-photo,
.variant-photo,
.main-product-photo {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-page {
display: grid;
grid-template-columns: 84px minmax(340px, 520px) minmax(360px, 1fr);
gap: 22px;
align-items: start;
}
.gallery-rail {
display: grid;
gap: 12px;
}
.gallery-thumb {
height: 102px;
border: 1px solid #d9dbe5;
border-radius: 12px;
background: #fff;
display: grid;
place-items: center;
overflow: hidden;
cursor: pointer;
padding: 8px;
}
.gallery-thumb.active {
outline: 2px solid #f62780;
}
.image-visual-wrap {
height: 540px;
border: 1px solid #d9dbe5;
background: #fff;
display: grid;
place-items: center;
padding: 18px;
border-radius: 18px;
overflow: hidden;
}
.main-product-photo {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.product-summary .title {
font-size: 24px;
margin: 0 0 10px;
}
.price-box {
border: 1px solid #d9dbe5;
border-radius: 12px;
padding: 12px 14px;
}
.price-box .amount {
font-size: 20px;
font-weight: 800;
}
.variant-strip-clean {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 14px 0;
}
.variant-card {
border: 1px solid #d9dbe5;
border-radius: 12px;
padding: 10px;
min-height: 116px;
background: #fff;
display: grid;
grid-template-columns: 88px 1fr;
gap: 12px;
align-items: center;
overflow: hidden;
}
.variant-card .thumb {
height: 88px;
background: #faf8fb;
border: 1px solid #ece7ef;
border-radius: 10px;
display: grid;
place-items: center;
margin-bottom: 0;
overflow: hidden;
}
.variant-copy {
display: grid;
gap: 6px;
font-size: 13px;
line-height: 1.35;
}
.variant-name {
font-weight: 700;
color: #3f3a48;
}
.variant-copy strong {
font-size: 16px;
}
.promo-thin {
display: none;
}
.checkout-layout {
display: grid;
grid-template-columns: 1fr 380px;
gap: 26px;
}
.checkout-card,
.summary-card {
border-radius: 20px;
}
.date-tile {
border-radius: 16px;
}
.coupon-box {
border-radius: 16px;
}
@media (max-width: 1100px) {
.header-row {
grid-template-columns: 1fr;
gap: 12px;
}
.header-actions {
justify-content: flex-start;
}
.hero-grid-refined,
.checkout-layout,
.product-page {
grid-template-columns: 1fr;
}
.hero-card-image {
grid-template-columns: 1fr;
}
.hero-image-side {
min-height: 280px;
}
.gallery-rail {
display: flex;
overflow: auto;
order: 2;
}
.gallery-thumb {
width: 88px;
height: 88px;
flex: 0 0 auto;
}
.main-visual {
order: 1;
}
.product-summary {
order: 3;
}
}
@media (max-width: 768px) {
.container {
width: min(var(--container), calc(100% - 20px));
}
.topbar {
display: none;
}
.header-row {
grid-template-columns: 1fr auto;
grid-template-areas: "logo actions" "search search";
gap: 12px;
padding: 10px 0;
}
.logo {
grid-area: logo;
font-size: 18px;
}
.header-actions {
grid-area: actions;
gap: 10px;
}
.label-hide {
display: none;
}
.header-search-wrap {
grid-area: search;
grid-template-columns: 1fr auto;
}
.location-trigger {
grid-column: 1/-1;
}
.hero-copy-image {
padding: 22px 18px;
}
.hero-copy-image h1 {
font-size: 30px;
}
.variant-strip-clean {
grid-template-columns: 1fr;
}
.image-visual-wrap {
height: 380px;
}
}
@media (max-width: 520px) {
.hero-copy-image h1 {
font-size: 27px;
}
.image-visual-wrap {
height: 300px;
padding: 12px;
}
}
/* Real-photo polish and refreshed banners */
.photo-fit,
.main-product-photo,
.gallery-photo,
.variant-photo,
.realistic-product-photo {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.product-thumb {
background: radial-gradient(
circle at 50% 18%,
#fff 0,
#fbf5fb 42%,
#f2e3ed 100%
);
box-shadow: inset 0 -18px 38px rgba(246, 39, 128, 0.08);
}
.product-card,
.addon-card {
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
.product-card:hover,
.addon-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 38px rgba(79, 40, 74, 0.13);
border-color: #efc3d8;
}
.realistic-product-photo {
filter: drop-shadow(0 18px 22px rgba(73, 38, 68, 0.2));
transform: scale(1.04);
}
.main-product-photo {
filter: drop-shadow(0 22px 28px rgba(72, 38, 68, 0.24));
transform: scale(1.02);
}
.image-visual-wrap,
.visual-wrap {
background: radial-gradient(
circle at 50% 24%,
#fff 0,
#fdf8fc 46%,
#f2e3ed 100%
);
}
.gallery-thumb,
.variant-card .thumb {
background: radial-gradient(
circle at 50% 25%,
#fff 0,
#fbf5fb 50%,
#f1e4ec 100%
);
}
.banner {
position: relative;
overflow: hidden;
min-height: 126px;
padding: 22px;
background: linear-gradient(135deg, #fff 0%, #fff1f7 42%, #f4ddea 100%);
box-shadow: 0 14px 32px rgba(246, 39, 128, 0.1);
}
.banner:before {
content: "";
position: absolute;
right: -24px;
bottom: -40px;
width: 170px;
height: 170px;
border-radius: 50%;
background: radial-gradient(
circle,
#fff 0 18%,
#ffbdd9 19% 36%,
#f62780 37% 52%,
transparent 53%
);
opacity: 0.72;
filter: blur(0.2px);
}
.banner:after {
content: "";
position: absolute;
right: 38px;
top: 18px;
width: 74px;
height: 74px;
border-radius: 45% 55% 48% 52%;
background: linear-gradient(135deg, #dfbed9, #fff);
box-shadow: 18px 18px 0 rgba(246, 39, 128, 0.08);
transform: rotate(-18deg);
opacity: 0.7;
}
.banner > * {
position: relative;
z-index: 1;
}
.hero-card-image {
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.94),
rgba(255, 239, 247, 0.9)
),
url("../hero-butterfly-floral.png");
background-size: cover;
background-position: center right;
overflow: hidden;
}
.hero-banner-photo {
filter: drop-shadow(0 26px 34px rgba(70, 38, 64, 0.22));
border-radius: 28px;
}
.hero-image-side {
position: relative;
}
.hero-image-side:after {
content: "Fresh today";
position: absolute;
right: 16px;
bottom: 18px;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 999px;
padding: 10px 16px;
color: var(--brand);
font-weight: 900;
box-shadow: 0 10px 24px rgba(246, 39, 128, 0.15);
}
/* Product information drawer */
.product-drawer-launcher {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin-top: 16px;
}
.drawer-link {
border: 1px solid #e4d6e1;
background: #fff;
border-radius: 14px;
padding: 12px;
text-align: left;
display: grid;
grid-template-columns: auto 1fr;
gap: 2px 10px;
align-items: center;
box-shadow: 0 8px 20px rgba(79, 40, 74, 0.06);
}
.drawer-link span {
grid-row: span 2;
width: 38px;
height: 38px;
border-radius: 12px;
background: #fff1f7;
display: grid;
place-items: center;
}
.drawer-link strong {
font-size: 14px;
}
.drawer-link em {
font-size: 12px;
color: #756f7c;
font-style: normal;
}
.drawer-link:hover {
border-color: #f62780;
transform: translateY(-1px);
}
.product-drawer[hidden] {
display: none !important;
}
.product-drawer {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
grid-template-columns: 1fr minmax(320px, 520px);
pointer-events: none;
}
.drawer-backdrop {
border: 0;
background: rgba(31, 32, 48, 0.36);
opacity: 0;
transition: opacity 0.22s ease;
}
.product-drawer-panel {
background: #fff;
height: 100%;
overflow: auto;
padding: 22px;
box-shadow: -20px 0 50px rgba(31, 32, 48, 0.2);
transform: translateX(102%);
transition: transform 0.26s ease;
outline: none;
}
.product-drawer.open {
pointer-events: auto;
}
.product-drawer.open .drawer-backdrop {
opacity: 1;
}
.product-drawer.open .product-drawer-panel {
transform: translateX(0);
}
.drawer-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.drawer-head h2 {
margin: 10px 0 0;
font-size: 26px;
}
.drawer-tab-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.drawer-tab-row button {
border: 1px solid #e6d5e4;
background: #fff;
border-radius: 999px;
padding: 10px 12px;
font-weight: 800;
color: #5d5564;
}
.drawer-tab-row button.active {
background: linear-gradient(90deg, var(--brand), var(--brand-2));
color: #fff;
border-color: transparent;
}
.drawer-content {
border: 1px solid #ead8e8;
background: #fdf8fc;
border-radius: 20px;
padding: 20px;
}
.drawer-content h3 {
margin: 0 0 12px;
font-size: 22px;
}
.drawer-content p,
.drawer-list {
color: #4e4856;
line-height: 1.8;
margin: 0;
}
.drawer-list {
padding-left: 18px;
}
@media (max-width: 768px) {
.product-drawer {
grid-template-columns: 1fr;
}
.drawer-backdrop {
position: absolute;
inset: 0;
}
.product-drawer-panel {
position: relative;
margin-top: auto;
height: min(82vh, 720px);
border-radius: 26px 26px 0 0;
transform: translateY(104%);
}
.product-drawer.open .product-drawer-panel {
transform: translateY(0);
}
.product-drawer-launcher {
grid-template-columns: 1fr;
}
.hero-card-image {
background-position: center;
}
.hero-image-side:after {
display: none;
}
}
/* Mobile app friendly subscription refresh */
html {
scroll-behavior: smooth;
}
body {
overflow-x: hidden;
}
.subscription-layout {
align-items: start;
gap: 18px;
}
.plan-left-stack {
display: grid;
gap: 14px;
}
.app-hero-visual {
min-height: 0;
box-shadow: var(--shadow);
}
.subscription-art {
min-height: 520px;
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 52% 30%,
rgba(255, 255, 255, 0.98) 0 7%,
transparent 8%
),
radial-gradient(circle at 36% 38%, #ffd2e3 0 6%, transparent 7%),
radial-gradient(circle at 65% 42%, #ff93bd 0 8%, transparent 9%),
radial-gradient(circle at 44% 56%, #f62780 0 10%, transparent 11%),
linear-gradient(145deg, #fff4fa 0%, #ead0e2 42%, #5a1a93 100%);
}
.subscription-art:before {
content: "";
position: absolute;
width: 330px;
height: 330px;
border-radius: 42% 58% 45% 55%;
left: 50%;
top: 46%;
transform: translate(-50%, -50%) rotate(-12deg);
background: radial-gradient(
circle at 35% 28%,
#fff 0 10%,
#ffd6e5 11% 22%,
#ff8cb8 23% 36%,
#e44b8e 37% 52%,
#9e4a91 53% 76%,
transparent 77%
);
filter: drop-shadow(0 28px 34px rgba(79, 40, 74, 0.24));
}
.subscription-art:after {
content: "";
position: absolute;
width: 120px;
height: 240px;
left: 50%;
top: 62%;
transform: translateX(-50%) rotate(8deg);
border-radius: 0 0 52px 52px;
background: linear-gradient(180deg, #547b52, #2f5b38);
clip-path: polygon(43% 0, 57% 0, 72% 100%, 28% 100%);
opacity: 0.9;
}
.subscription-art-card {
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
z-index: 2;
display: grid;
gap: 5px;
padding: 16px;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 22px;
color: #fff;
background: rgba(31, 32, 48, 0.28);
backdrop-filter: blur(14px);
box-shadow: 0 18px 34px rgba(31, 32, 48, 0.18);
}
.subscription-art-card span {
font-size: 12px;
font-weight: 900;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.subscription-art-card strong {
font-size: 24px;
line-height: 1.05;
}
.subscription-art-card small {
font-size: 13px;
opacity: 0.92;
}
.ai-subscription-advisor {
border: 1px solid #efd3e0;
border-radius: 24px;
padding: 18px;
background: linear-gradient(180deg, #ffffff 0%, #fbf5fb 100%);
box-shadow: var(--shadow);
}
.advisor-head {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 10px;
}
.advisor-icon {
width: 52px;
height: 52px;
border-radius: 18px;
display: grid;
place-items: center;
background: linear-gradient(135deg, #f1dfea, #dfb9d5);
border: 1px solid #d7a5cc;
font-size: 24px;
}
.ai-subscription-advisor h2 {
font-size: 22px;
line-height: 1.15;
margin: 8px 0 0;
}
.advisor-copy {
margin: 0 0 14px;
color: #706979;
line-height: 1.6;
}
.advisor-controls {
display: grid;
gap: 10px;
}
.advisor-controls label {
display: grid;
gap: 7px;
font-weight: 800;
color: #3b3545;
}
.advisor-controls label span {
font-size: 13px;
}
.advisor-controls select {
width: 100%;
min-height: 48px;
border: 1px solid #ead3df;
border-radius: 16px;
background: #fff;
color: #342f3e;
padding: 0 14px;
outline: none;
}
.advisor-result {
margin-top: 14px;
padding: 16px;
border-radius: 20px;
border: 1px solid #efc4d8;
background: linear-gradient(135deg, #fff, #f8edf6);
}
.advisor-result span {
display: block;
color: var(--brand);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.advisor-result strong {
display: block;
margin: 7px 0 6px;
font-size: 19px;
}
.advisor-result p {
margin: 0;
color: #625b69;
line-height: 1.55;
}
.subscription-title {
font-size: clamp(32px, 4vw, 46px);
line-height: 1.05;
margin: 16px 0 12px;
letter-spacing: -0.04em;
}
.subscription-intro {
color: #726c79;
line-height: 1.7;
}
.choice-card,
.chip,
.sub-product,
.kpi {
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.choice-card:hover,
.sub-product:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(79, 40, 74, 0.1);
border-color: #eb9fc2;
}
.chip {
min-height: 38px;
display: inline-flex;
align-items: center;
}
@media (max-width: 1100px) {
.subscription-layout {
grid-template-columns: 1fr;
}
.subscription-art {
min-height: 360px;
}
.plan-body {
padding: 20px;
}
}
@media (max-width: 768px) {
body {
background: #fbf5fb;
}
.page-pad {
padding: 12px 0 22px;
}
.breadcrumb {
display: none;
}
.header-main {
box-shadow: 0 10px 28px rgba(79, 40, 74, 0.08);
}
.header-search-wrap {
gap: 10px;
}
.location-trigger,
.search-modern,
.ai-assistant-trigger {
height: 46px;
border-radius: 16px;
}
.navbar {
position: sticky;
top: 119px;
z-index: 35;
}
.navbar .container {
padding: 0 2px;
scroll-snap-type: x mandatory;
}
.navbar a {
scroll-snap-align: start;
}
.subscription-layout {
gap: 12px;
}
.plan-left-stack {
gap: 12px;
}
.subscription-art {
min-height: 310px;
border-radius: 22px;
}
.subscription-art:before {
width: 245px;
height: 245px;
}
.subscription-art-card {
left: 12px;
right: 12px;
bottom: 12px;
border-radius: 18px;
padding: 14px;
}
.ai-subscription-advisor,
.plan-body {
border-radius: 22px;
padding: 16px;
}
.advisor-head {
align-items: flex-start;
}
.advisor-icon {
width: 46px;
height: 46px;
border-radius: 16px;
}
.subscription-title {
font-size: 34px;
}
.kpi-row,
.choice-grid {
grid-template-columns: 1fr;
}
.kpi {
padding: 13px;
}
.choice-card {
padding: 14px;
border-radius: 16px;
}
.chip-row {
gap: 8px;
flex-wrap: nowrap;
overflow: auto;
padding-bottom: 4px;
scrollbar-width: none;
}
.chip-row::-webkit-scrollbar {
display: none;
}
.chip {
flex: 0 0 auto;
}
.sub-product-grid {
grid-template-columns: 1fr 1fr;
}
.sub-product {
border-radius: 18px;
background: #fff;
padding: 9px;
}
.sub-product h4 {
font-size: 14px;
margin: 10px 0 5px;
}
.sub-product p {
font-size: 12px !important;
margin-top: 0;
}
}
@media (max-width: 520px) {
.container {
width: min(var(--container), calc(100% - 16px));
}
.logo-mark {
width: 36px;
height: 36px;
border-radius: 12px;
}
.header-actions {
gap: 8px;
}
.icon-btn {
font-size: 18px;
}
.header-search-wrap {
grid-template-columns: 1fr 46px;
}
.location-trigger {
justify-content: flex-start;
}
.search-modern {
padding: 0 12px;
}
.search-modern input {
font-size: 14px;
}
.subscription-art {
min-height: 280px;
}
.subscription-title {
font-size: 30px;
}
.advisor-controls select {
min-height: 46px;
}
.advisor-result strong {
font-size: 17px;
}
.sub-product-grid {
grid-template-columns: 1fr;
}
.footer .search {
margin-top: 14px;
}
}
/* 100% mobile-app responsive upgrade */
:root {
--app-bottom-nav-height: 76px;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
min-width: 320px;
}
input,
select,
textarea,
button {
-webkit-tap-highlight-color: transparent;
}
.btn,
.chip,
.choice-card,
.icon-btn,
.nav-pill,
.city-pill,
.mobile-tab {
touch-action: manipulation;
}
.btn {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.header-search-wrap {
min-width: 0;
}
.search-modern input {
min-width: 0;
}
.mobile-bottom-nav {
display: none;
}
.mobile-whatsapp-fab {
display: none;
}
.gift-assistant-panel {
background: #fff;
border: 1px solid #f0d3df;
}
.gift-assistant-panel .advisor-head {
align-items: flex-start;
}
.mobile-assistant-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 16px;
}
.mobile-assistant-form select,
.mobile-assistant-form textarea {
width: 100%;
border: 1px solid #d9d7e2;
border-radius: 18px;
background: #fff;
color: #020617;
outline: none;
font-size: 16px;
box-shadow: none;
}
.mobile-assistant-form select {
min-height: 66px;
padding: 0 24px;
}
.mobile-assistant-form textarea {
grid-column: 1/-1;
min-height: 172px;
resize: vertical;
padding: 20px;
line-height: 1.35;
}
.assistant-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 16px;
}
.assistant-actions .btn {
border-radius: 14px;
font-weight: 900;
}
@media (max-width: 960px) {
.topbar {
display: none;
}
.header-main {
top: 0;
}
.header-row {
grid-template-columns: 1fr auto;
gap: 10px;
padding: 10px 0 8px;
}
.logo {
font-size: 19px;
}
.header-search-wrap {
grid-column: 1/-1;
grid-row: 2;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
}
.header-actions {
gap: 8px;
}
.label-hide {
display: none;
}
.icon-btn {
width: 42px;
height: 42px;
border-radius: 15px;
justify-content: center;
background: #fbf5fb;
border: 1px solid #f0d8e4;
}
.location-trigger {
max-width: 112px;
overflow: hidden;
}
.navbar {
border-top: 1px solid #f5e3ec;
overflow: hidden;
}
.navbar .container {
width: 100%;
padding: 9px 12px;
overflow-x: auto;
display: flex;
gap: 8px;
scrollbar-width: none;
}
.navbar .container::-webkit-scrollbar {
display: none;
}
.navbar a {
flex: 0 0 auto;
min-height: 38px;
display: inline-flex;
align-items: center;
padding: 0 14px;
border-radius: 999px;
background: #fbf5fb;
border: 1px solid #f3dae6;
white-space: nowrap;
}
main.page-pad {
padding-bottom: calc(var(--app-bottom-nav-height) + 22px);
}
.footer {
padding-bottom: calc(var(--app-bottom-nav-height) + 22px);
}
.mobile-bottom-nav {
position: fixed;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 80;
height: 64px;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
padding: 7px;
border: 1px solid rgba(239, 211, 224, 0.95);
border-radius: 24px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 44px rgba(79, 40, 74, 0.22);
backdrop-filter: blur(18px);
}
.mobile-tab {
display: grid;
place-items: center;
gap: 2px;
border-radius: 17px;
color: #746a77;
font-size: 11px;
font-weight: 800;
}
.mobile-tab span {
font-size: 18px;
line-height: 1;
}
.mobile-tab.active {
color: #5a1a93;
background: #f7ecf5;
}
.mobile-whatsapp-fab {
position: fixed;
right: 16px;
bottom: 88px;
z-index: 79;
width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 20px;
background: #16a34a;
color: #fff;
box-shadow: 0 14px 30px rgba(22, 163, 74, 0.32);
font-size: 24px;
}
}
@media (max-width: 768px) {
.container {
width: min(var(--container), calc(100% - 20px));
}
.panel,
.kpi,
.choice-card,
.sub-product,
.ai-subscription-advisor,
.plan-visual {
box-shadow: 0 10px 28px rgba(79, 40, 74, 0.08);
}
.subscription-layout {
display: flex;
flex-direction: column;
}
.plan-left-stack,
.plan-body {
width: 100%;
}
.plan-left-stack {
order: 1;
}
.plan-body {
order: 2;
}
.app-hero-visual {
border-radius: 28px;
overflow: hidden;
}
.subscription-art {
min-height: 240px;
border-radius: 28px;
}
.subscription-art-card {
background: rgba(31, 32, 48, 0.36);
}
.ai-subscription-advisor {
border-radius: 28px;
}
.gift-assistant-panel {
padding: 18px;
}
.gift-assistant-panel h2 {
font-size: 22px;
margin: 4px 0 0;
}
.mobile-assistant-form {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.mobile-assistant-form select {
min-height: 58px;
border-radius: 16px;
padding: 0 16px;
}
.mobile-assistant-form textarea {
min-height: 142px;
border-radius: 16px;
padding: 16px;
}
.assistant-actions {
grid-template-columns: 1fr;
gap: 10px;
}
.assistant-actions .btn {
width: 100%;
min-height: 56px;
}
.plan-body {
border-radius: 28px;
}
.kpi-row {
gap: 10px;
}
.choice-grid {
gap: 10px;
}
.sub-product-grid {
gap: 10px;
}
}
@media (max-width: 520px) {
body {
background: linear-gradient(180deg, #fbf5fb 0%, #ffffff 42%, #fbf5fb 100%);
}
.container {
width: calc(100% - 16px);
}
.header-row {
padding-top: 8px;
}
.logo span:last-child {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
}
.header-actions .icon-btn:first-child {
display: none;
}
.header-search-wrap {
grid-template-columns: 1fr 46px;
}
.location-trigger {
grid-column: 1/2;
max-width: none;
}
.search-modern {
grid-column: 1/-1;
grid-row: 2;
min-height: 50px;
}
.ai-assistant-trigger {
grid-column: 2/3;
grid-row: 1;
}
.navbar {
top: 108px;
}
.subscription-art {
min-height: 220px;
}
.subscription-art:before {
width: 205px;
height: 205px;
top: 42%;
}
.subscription-art:after {
height: 170px;
top: 58%;
}
.subscription-art-card strong {
font-size: 20px;
}
.mobile-assistant-form {
grid-template-columns: 1fr;
gap: 10px;
}
.mobile-assistant-form select {
min-height: 56px;
font-size: 16px;
border-radius: 16px;
}
.mobile-assistant-form textarea {
min-height: 132px;
font-size: 16px;
}
.advisor-result {
border-radius: 18px;
}
.subscription-title {
font-size: 28px;
}
.subscription-intro {
font-size: 15px;
}
.kpi div:first-child {
font-size: 26px !important;
}
.choice-card {
min-height: 76px;
}
.chip-row {
margin-left: -2px;
padding-left: 2px;
}
.chip {
min-height: 42px;
padding: 0 14px;
border-radius: 999px;
}
.sub-product {
display: grid;
grid-template-columns: 96px 1fr;
gap: 10px;
align-items: center;
}
.sub-product .product-thumb {
margin: 0;
}
.sub-product h4 {
margin: 0 0 4px;
}
}
@media (max-width: 380px) {
.mobile-bottom-nav {
left: 6px;
right: 6px;
bottom: 6px;
}
.mobile-tab {
font-size: 10px;
}
.mobile-assistant-form select,
.mobile-assistant-form textarea {
font-size: 15px;
}
}
/* Final mobile app polish and reliability fixes */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
min-width: 320px;
overflow-x: hidden;
}
[hidden] {
display: none !important;
}
.location-trigger,
.icon-btn,
.ai-assistant-trigger,
.btn,
.drawer-link,
.city-pill,
.mobile-tab {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.location-overlay {
animation: fadeIn 0.18s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.location-modal {
max-height: min(720px, calc(100dvh - 24px));
overflow: auto;
}
.location-head {
position: sticky;
top: 0;
background: #fff;
z-index: 2;
}
.location-head .close-x {
flex: 0 0 auto;
}
.location-body .select {
width: 100%;
min-height: 56px;
}
.product-drawer {
touch-action: none;
}
.product-drawer-panel {
touch-action: pan-y;
border-radius: 28px 0 0 28px;
}
.drawer-backdrop {
cursor: pointer;
}
.drawer-content h3 {
margin-top: 0;
}
.drawer-content p,
.drawer-list {
line-height: 1.65;
}
.mobile-bottom-nav {
padding-bottom: max(7px, env(safe-area-inset-bottom));
}
.mobile-whatsapp-fab {
bottom: calc(88px + env(safe-area-inset-bottom));
}
@media (hover: none) {
.drawer-link:hover {
transform: none;
}
}
@media (max-width: 900px) {
.product-drawer {
display: block;
background: rgba(31, 32, 48, 0.28);
pointer-events: none;
}
.drawer-backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.product-drawer-panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: auto;
max-height: 86dvh;
transform: translateY(105%);
border-radius: 30px 30px 0 0;
padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
box-shadow: 0 -24px 55px rgba(31, 32, 48, 0.24);
}
.product-drawer.open .product-drawer-panel {
transform: translateY(0);
}
.drawer-head {
align-items: center;
margin-bottom: 12px;
}
.drawer-head h2 {
font-size: 20px;
line-height: 1.15;
}
.drawer-head .close-x {
width: 48px;
height: 48px;
border-radius: 16px;
}
.drawer-tab-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
overflow-x: auto;
padding-bottom: 4px;
flex-wrap: nowrap;
scrollbar-width: none;
}
.drawer-tab-row::-webkit-scrollbar {
display: none;
}
.drawer-tab-row button {
min-height: 42px;
padding: 0 14px;
white-space: nowrap;
}
.drawer-content {
font-size: 15px;
}
.product-drawer-launcher {
grid-template-columns: 1fr 1fr;
gap: 9px;
}
.drawer-link {
border-radius: 18px;
padding: 12px;
}
}
@media (max-width: 768px) {
.topbar {
display: none;
}
.header-main {
top: 0;
}
.header-row {
grid-template-columns: 1fr auto;
gap: 10px;
padding: 10px 0 8px;
}
.logo {
font-size: 20px;
}
.logo-mark {
width: 36px;
height: 36px;
border-radius: 12px;
}
.header-actions {
gap: 8px;
}
.header-actions .label-hide {
display: none;
}
.icon-btn {
width: 42px;
height: 42px;
border-radius: 16px;
justify-content: center;
background: #fbf5fb;
border: 1px solid #e9d6e6;
}
.header-search-wrap {
grid-column: 1/-1;
display: grid;
grid-template-columns: minmax(118px, 0.42fr) 1fr 46px;
gap: 8px;
width: 100%;
}
.location-trigger {
min-height: 48px;
border-radius: 16px;
justify-content: center;
padding: 0 10px;
background: #fff;
border: 1px solid #e6d3e3;
}
.search-modern {
min-height: 48px;
border-radius: 16px;
}
.search-modern input {
min-width: 0;
padding: 0 10px;
font-size: 15px;
}
.search-modern button {
height: 48px;
width: 42px;
}
.ai-assistant-trigger {
width: 46px;
height: 48px;
border-radius: 16px;
background: #f7ecf5;
border: 1px solid #e8d1e4;
display: grid;
place-items: center;
}
.navbar {
position: sticky;
top: 114px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(16px);
z-index: 39;
}
.page-pad {
padding-top: 12px;
}
.breadcrumb {
font-size: 12px;
overflow-x: auto;
white-space: nowrap;
}
.location-overlay {
align-items: end;
place-items: end center;
padding: 0;
background: rgba(31, 32, 48, 0.38);
z-index: 120;
}
.location-modal {
width: 100%;
max-height: 88dvh;
border-radius: 30px 30px 0 0;
border-bottom: 0;
box-shadow: 0 -28px 70px rgba(57, 33, 53, 0.24);
}
.location-head {
padding: 16px 16px 12px;
}
.location-head h2 {
font-size: 22px;
}
.close-x {
width: 48px;
height: 48px;
border-radius: 16px;
font-size: 24px;
}
.location-body {
padding: 14px 16px calc(22px + env(safe-area-inset-bottom));
}
.form-row {
grid-template-columns: 1fr;
gap: 12px;
}
.city-pills {
display: flex;
overflow-x: auto;
gap: 10px;
margin-top: 14px;
padding-bottom: 2px;
scrollbar-width: none;
}
.city-pills::-webkit-scrollbar {
display: none;
}
.city-pill {
flex: 0 0 auto;
height: 50px;
padding: 0 18px;
border-radius: 999px;
font-size: 16px;
}
.location-actions {
margin-top: 16px;
}
.location-actions .btn {
width: 100%;
min-height: 56px;
border-radius: 18px;
}
.listing-layout {
display: block;
}
.sidebar {
position: static;
margin-bottom: 12px;
}
.filter-group {
border-radius: 18px;
}
.product-page {
display: flex;
flex-direction: column;
gap: 14px;
}
.gallery-rail {
order: 2;
display: flex;
overflow-x: auto;
gap: 10px;
}
.gallery-thumb {
flex: 0 0 74px;
}
.product-main-image {
order: 1;
border-radius: 26px;
}
.product-info {
order: 3;
border-radius: 26px;
}
}
@media (max-width: 520px) {
.header-search-wrap {
grid-template-columns: 1fr 46px;
}
.location-trigger {
grid-column: 1/2;
}
.ai-assistant-trigger {
grid-column: 2/3;
}
.search-modern {
grid-column: 1/-1;
grid-row: 2;
}
.navbar {
top: 108px;
}
.location-text {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-drawer-launcher {
grid-template-columns: 1fr;
}
.drawer-link {
grid-template-columns: auto 1fr;
border-radius: 18px;
}
.mobile-bottom-nav {
height: 66px;
left: 8px;
right: 8px;
bottom: 8px;
border-radius: 24px;
}
}
/* === Reliability patch: product drawer, location modal, product mobile layout === */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
min-width: 320px;
overflow-x: hidden;
}
body.locked {
overflow: hidden;
touch-action: none;
}
[hidden] {
display: none !important;
}
.location-trigger,
.icon-btn,
.ai-assistant-trigger,
.btn,
.drawer-link,
.city-pill,
.mobile-tab {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.location-overlay {
position: fixed;
inset: 0;
z-index: 140;
display: grid;
place-items: center;
padding: 20px;
background: rgba(31, 32, 48, 0.38);
backdrop-filter: blur(9px);
}
.location-overlay.is-open {
animation: fadeIn 0.18s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.location-modal {
width: min(760px, 100%);
max-height: min(720px, calc(100dvh - 24px));
overflow: auto;
background: #fff;
border-radius: 30px;
border: 1px solid #edd4e1;
box-shadow: 0 40px 80px rgba(57, 33, 53, 0.2);
}
.location-head {
position: sticky;
top: 0;
z-index: 2;
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 18px 20px;
border-bottom: 1px solid #f3e3eb;
}
.location-head .close-x,
.drawer-head .close-x {
display: grid;
place-items: center;
border: 0;
background: #fff2f8;
color: #823f7b;
font-weight: 900;
cursor: pointer;
}
.location-body {
padding: 20px;
}
.location-body .select {
width: 100%;
min-height: 56px;
}
.location-actions .btn {
min-height: 54px;
}
.city-pill {
border: 1px solid #e6d3e3;
background: #fff;
border-radius: 999px;
min-height: 44px;
padding: 0 18px;
font-weight: 800;
color: #5f5363;
}
.city-pill.active {
background: linear-gradient(90deg, var(--brand), var(--brand-2));
color: #fff;
border-color: transparent;
}
.product-drawer[hidden] {
display: none !important;
}
.product-drawer {
position: fixed;
inset: 0;
z-index: 150;
display: grid;
grid-template-columns: 1fr minmax(320px, 520px);
pointer-events: none;
touch-action: none;
}
.product-drawer.open {
pointer-events: auto;
}
.drawer-backdrop {
border: 0;
background: rgba(31, 32, 48, 0.36);
opacity: 0;
transition: opacity 0.22s ease;
cursor: pointer;
}
.product-drawer.open .drawer-backdrop {
opacity: 1;
}
.product-drawer-panel {
background: #fff;
height: 100%;
overflow: auto;
padding: 22px;
box-shadow: -20px 0 50px rgba(31, 32, 48, 0.2);
transform: translateX(102%);
transition: transform 0.26s ease;
outline: none;
touch-action: pan-y;
border-radius: 28px 0 0 28px;
}
.product-drawer.open .product-drawer-panel {
transform: translateX(0);
}
.drawer-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.drawer-head .close-x {
width: 46px;
height: 46px;
border-radius: 16px;
font-size: 24px;
}
.drawer-tab-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.drawer-tab-row button {
border: 1px solid #e6d5e4;
background: #fff;
border-radius: 999px;
min-height: 42px;
padding: 0 14px;
font-weight: 800;
color: #5d5564;
}
.drawer-tab-row button.active {
background: linear-gradient(90deg, var(--brand), var(--brand-2));
color: #fff;
border-color: transparent;
}
.drawer-content {
border: 1px solid #ead8e8;
background: #fdf8fc;
border-radius: 20px;
padding: 20px;
}
.drawer-content h3 {
margin: 0 0 12px;
font-size: 22px;
}
.drawer-content p,
.drawer-list {
color: #4e4856;
line-height: 1.65;
}
.drawer-list {
padding-left: 18px;
margin: 0;
}
.main-product-photo,
.gallery-photo,
.variant-photo {
width: 100%;
height: 100%;
object-fit: contain;
}
.visual-wrap {
overflow: hidden;
}
.product-summary {
min-width: 0;
}
.variant-card {
cursor: pointer;
}
.cta-wide .btn {
min-height: 48px;
}
@media (max-width: 900px) {
.product-drawer {
display: block;
background: rgba(31, 32, 48, 0.28);
pointer-events: none;
}
.product-drawer.open {
pointer-events: auto;
}
.drawer-backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.product-drawer-panel {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: auto;
max-height: 86dvh;
transform: translateY(105%);
border-radius: 30px 30px 0 0;
padding: 16px 14px calc(20px + env(safe-area-inset-bottom));
box-shadow: 0 -24px 55px rgba(31, 32, 48, 0.24);
}
.product-drawer.open .product-drawer-panel {
transform: translateY(0);
}
.drawer-head {
align-items: center;
margin-bottom: 12px;
}
.drawer-head h2 {
font-size: 20px;
line-height: 1.15;
}
.drawer-tab-row {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
overflow-x: auto;
padding-bottom: 4px;
flex-wrap: nowrap;
scrollbar-width: none;
}
.drawer-tab-row::-webkit-scrollbar {
display: none;
}
.drawer-content {
font-size: 15px;
}
.product-drawer-launcher {
grid-template-columns: 1fr 1fr;
gap: 9px;
}
.drawer-link {
border-radius: 18px;
padding: 12px;
}
}
@media (max-width: 768px) {
.topbar {
display: none;
}
.header-main {
top: 0;
}
.header-row {
grid-template-columns: 1fr auto;
gap: 10px;
padding: 10px 0 8px;
}
.logo {
font-size: 20px;
}
.logo-mark {
width: 36px;
height: 36px;
border-radius: 12px;
}
.header-actions {
gap: 8px;
}
.header-actions .label-hide {
display: none;
}
.icon-btn {
width: 42px;
height: 42px;
border-radius: 16px;
justify-content: center;
background: #fbf5fb;
border: 1px solid #e9d6e6;
}
.header-search-wrap {
grid-column: 1/-1;
display: grid;
grid-template-columns: minmax(118px, 0.42fr) 1fr 46px;
gap: 8px;
width: 100%;
}
.location-trigger {
min-height: 48px;
border-radius: 16px;
justify-content: center;
padding: 0 10px;
background: #fff;
border: 1px solid #e6d3e3;
}
.search-modern {
min-height: 48px;
border-radius: 16px;
}
.search-modern input {
min-width: 0;
padding: 0 10px;
font-size: 15px;
}
.search-modern button {
height: 48px;
width: 42px;
}
.ai-assistant-trigger {
width: 46px;
height: 48px;
border-radius: 16px;
background: #f7ecf5;
border: 1px solid #e8d1e4;
display: grid;
place-items: center;
}
.navbar {
position: sticky;
top: 114px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(16px);
z-index: 39;
}
.page-pad {
padding-top: 12px;
padding-bottom: 96px;
}
.breadcrumb {
font-size: 12px;
overflow-x: auto;
white-space: nowrap;
}
.location-overlay {
align-items: end;
place-items: end center;
padding: 0;
background: rgba(31, 32, 48, 0.42);
}
.location-modal {
width: 100%;
max-height: 88dvh;
border-radius: 30px 30px 0 0;
border-bottom: 0;
box-shadow: 0 -28px 70px rgba(57, 33, 53, 0.24);
}
.location-head {
padding: 16px 16px 12px;
}
.location-head h2 {
font-size: 22px;
}
.close-x {
width: 48px;
height: 48px;
border-radius: 16px;
font-size: 24px;
}
.location-body {
padding: 14px 16px calc(22px + env(safe-area-inset-bottom));
}
.form-row {
grid-template-columns: 1fr !important;
gap: 12px;
}
.city-pills {
display: flex;
overflow-x: auto;
gap: 10px;
margin-top: 14px;
padding-bottom: 2px;
scrollbar-width: none;
}
.city-pills::-webkit-scrollbar {
display: none;
}
.city-pill {
flex: 0 0 auto;
height: 50px;
padding: 0 18px;
border-radius: 999px;
font-size: 16px;
}
.location-actions {
margin-top: 16px;
}
.location-actions .btn {
width: 100%;
min-height: 56px;
border-radius: 18px;
}
.listing-layout {
display: block;
}
.sidebar {
position: static;
margin-bottom: 12px;
}
.product-page {
display: flex;
flex-direction: column;
gap: 14px;
}
.gallery-rail {
order: 2;
display: flex;
overflow-x: auto;
gap: 10px;
padding-bottom: 4px;
}
.gallery-thumb {
flex: 0 0 74px;
height: 74px;
}
.main-visual {
order: 1;
width: 100%;
border-radius: 26px;
}
.visual-wrap {
height: min(72vw, 390px);
min-height: 290px;
border-radius: 24px;
}
.product-summary {
order: 3;
width: 100%;
border-radius: 26px;
}
.variant-strip {
display: flex;
overflow-x: auto;
gap: 10px;
padding-bottom: 4px;
scroll-snap-type: x proximity;
}
.variant-card {
flex: 0 0 170px;
scroll-snap-align: start;
}
.cta-wide {
grid-template-columns: 1fr;
gap: 10px;
}
.addon-grid,
.listing-grid,
.product-row,
.occasion-row,
.banner-row,
.feature-grid,
.plan-grid,
.tile-grid,
.mini-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.checkout-layout,
.page-two-col,
.hero-grid {
grid-template-columns: 1fr;
}
.sticky-checkout {
position: fixed;
left: 10px;
right: 10px;
bottom: 78px;
z-index: 55;
margin: 0;
padding: 12px;
border-radius: 20px;
}
.sticky-checkout .btn {
padding: 12px 14px;
}
.mobile-bottom-nav {
display: flex;
}
}
@media (max-width: 520px) {
.container {
width: min(var(--container), calc(100% - 22px));
}
.header-search-wrap {
grid-template-columns: 1fr 46px;
}
.location-trigger {
grid-column: 1/2;
}
.ai-assistant-trigger {
grid-column: 2/3;
}
.search-modern {
grid-column: 1/-1;
grid-row: 2;
}
.navbar {
top: 108px;
}
.location-text {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-drawer-launcher {
grid-template-columns: 1fr;
}
.drawer-link {
grid-template-columns: auto 1fr;
border-radius: 18px;
}
.addon-grid,
.listing-grid,
.product-row,
.occasion-row,
.banner-row,
.feature-grid,
.plan-grid,
.tile-grid,
.mini-grid {
grid-template-columns: 1fr;
}
.mobile-bottom-nav {
height: 66px;
left: 8px;
right: 8px;
bottom: 8px;
border-radius: 24px;
}
}
/* === Dynamic responsive polish === */
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
min-width: 320px;
background:
radial-gradient(
circle at top left,
rgba(235, 77, 151, 0.1),
transparent 30rem
),
radial-gradient(
circle at 85% 15%,
rgba(246, 39, 128, 0.09),
transparent 24rem
),
var(--bg);
}
.header-main {
transition:
box-shadow 0.24s ease,
background-color 0.24s ease,
transform 0.24s ease;
}
.header-main.is-scrolled {
box-shadow: 0 12px 30px rgba(79, 40, 74, 0.1);
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(16px);
}
.logo,
.btn,
.product-card,
.occasion-card,
.banner,
.category-card,
.mini-card,
.plan-card,
.icon-btn,
.nav-pill,
.drawer-link {
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease,
background 0.22s ease;
}
@media (hover: hover) {
.product-card:hover,
.occasion-card:hover,
.banner:hover,
.category-card:hover,
.mini-card:hover,
.plan-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 36px rgba(79, 40, 74, 0.13);
border-color: #ebb6d0;
}
.btn:hover,
.icon-btn:hover,
.nav-pill:hover,
.drawer-link:hover {
transform: translateY(-2px);
}
.navbar a:hover {
color: var(--brand);
}
}
.btn:active,
.icon-btn:active,
.city-pill:active,
.gallery-thumb:active {
transform: scale(0.98);
}
.btn-primary {
position: relative;
overflow: hidden;
box-shadow: 0 12px 22px rgba(246, 39, 128, 0.18);
}
.btn-primary::after {
content: "";
position: absolute;
inset: -60% auto -60% -40%;
width: 34%;
transform: rotate(18deg);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.36),
transparent
);
animation: gg-shimmer 3.8s ease-in-out infinite;
}
@keyframes gg-shimmer {
0%,
55% {
left: -40%;
}
100% {
left: 125%;
}
}
.hero-card {
position: relative;
overflow: hidden;
}
.hero-card::before {
content: "";
position: absolute;
width: 18rem;
height: 18rem;
right: -7rem;
top: -7rem;
border-radius: 999px;
background: rgba(235, 77, 151, 0.1);
pointer-events: none;
}
.hero-copy,
.hero-visual,
.product-card,
.section-head,
.banner,
.occasion-card {
animation: gg-fade-up 0.55s ease both;
}
@keyframes gg-fade-up {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.reveal-on-scroll {
opacity: 0;
transform: translateY(18px);
transition:
opacity 0.55s ease,
transform 0.55s ease;
}
.reveal-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
.search-modern:focus-within,
.select:focus,
input:focus,
textarea:focus {
box-shadow: 0 0 0 4px rgba(235, 77, 151, 0.12);
}
.product-thumb,
.visual-wrap,
.gallery-thumb,
.oc-ico {
isolation: isolate;
}
.product-thumb::after,
.visual-wrap::after {
content: "";
position: absolute;
inset: auto 10% 10% 10%;
height: 18%;
border-radius: 999px;
background: radial-gradient(
ellipse,
rgba(246, 39, 128, 0.1),
transparent 70%
);
z-index: -1;
}
.thumb-wrap,
.product-thumb,
.visual-wrap {
position: relative;
}
.mobile-bottom-nav {
backdrop-filter: blur(18px);
box-shadow: 0 16px 46px rgba(31, 32, 48, 0.22);
}
.mobile-tab {
min-width: 0;
}
.mobile-tab.active {
transform: translateY(-2px);
}
.mobile-whatsapp-fab {
box-shadow: 0 14px 28px rgba(20, 163, 74, 0.26);
}
.responsive-filter-toggle {
display: none;
width: 100%;
min-height: 50px;
margin: 0 0 12px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fff;
color: #4a4658;
font-weight: 800;
}
@media (max-width: 1100px) {
.header-row {
grid-template-columns: 210px 1fr auto;
}
.product-row {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.listing-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.hero-copy h1 {
font-size: clamp(34px, 5vw, 44px);
}
}
@media (max-width: 900px) {
.hero-grid {
grid-template-columns: 1fr;
}
.hero-visual {
min-height: clamp(260px, 56vw, 390px);
}
.stat-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.listing-layout {
grid-template-columns: 1fr;
}
.responsive-filter-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.sidebar {
display: none;
}
.sidebar.is-open {
display: block;
animation: gg-fade-up 0.25s ease both;
}
}
@media (max-width: 768px) {
body {
background:
radial-gradient(
circle at 12% 0,
rgba(235, 77, 151, 0.12),
transparent 18rem
),
var(--bg);
}
.section {
padding: 18px 0;
}
.section-head {
align-items: flex-start;
flex-direction: column;
}
.section-head h2 {
font-size: clamp(22px, 7vw, 28px);
}
.hero-card {
padding: 18px;
border-radius: 22px;
}
.hero-copy h1 {
font-size: clamp(30px, 9vw, 40px);
}
.hero-copy p {
font-size: 15px;
}
.cta-row .btn {
flex: 1 1 150px;
min-height: 50px;
}
.stat-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-card h4 {
min-height: auto;
}
.sortbar {
flex-direction: column;
align-items: stretch;
}
.banner {
align-items: flex-start;
flex-direction: column;
}
}
@media (max-width: 420px) {
.container {
width: calc(100% - 18px);
}
.logo span:last-child {
font-size: 18px;
}
.header-actions {
gap: 6px;
}
.icon-btn {
width: 38px;
height: 38px;
border-radius: 14px;
}
.header-search-wrap {
gap: 7px;
}
.location-trigger,
.search-modern,
.ai-assistant-trigger {
min-height: 46px;
}
.stat-strip {
grid-template-columns: 1fr;
}
.btn {
width: 100%;
padding: 13px 16px;
}
.product-card,
.occasion-card {
border-radius: 16px;
}
.visual-wrap {
min-height: 250px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
/* === Full-site premium dynamic responsive upgrade === */
body.ready .product-card,
body.ready .occasion-card,
body.ready .feature-card,
body.ready .mini-card,
body.ready .panel,
body.ready .banner {
animation-delay: var(--stagger, 0ms);
}
.header-main {
border-bottom: 1px solid rgba(239, 215, 228, 0.85);
}
.navbar a.active {
color: var(--brand);
background: rgba(255, 255, 255, 0.65);
border-radius: 999px;
padding: 8px 12px;
}
.product-card {
position: relative;
overflow: hidden;
}
.product-card::before,
.panel::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 120px;
height: 120px;
background: radial-gradient(
circle,
rgba(235, 77, 151, 0.08),
transparent 70%
);
pointer-events: none;
}
.quick-add {
width: 100%;
min-height: 42px;
margin-top: 12px;
border: 0;
border-radius: 14px;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
color: #fff;
font-weight: 900;
box-shadow: 0 12px 22px rgba(246, 39, 128, 0.16);
}
.gg-toast {
position: fixed;
left: 50%;
bottom: calc(92px + env(safe-area-inset-bottom));
transform: translate(-50%, 20px);
z-index: 300;
background: #1f2030;
color: #fff;
padding: 12px 18px;
border-radius: 999px;
box-shadow: 0 18px 40px rgba(31, 32, 48, 0.25);
opacity: 0;
pointer-events: none;
transition:
opacity 0.22s ease,
transform 0.22s ease;
font-weight: 800;
font-size: 14px;
}
.gg-toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
.page-visual-card {
margin-bottom: 18px;
border: 1px solid #e6d3e3;
border-radius: 24px;
overflow: hidden;
background: linear-gradient(135deg, #fff, #f7ecf5);
box-shadow: var(--shadow);
}
.page-visual-card img {
width: 100%;
height: 260px;
object-fit: contain;
background: radial-gradient(circle at 50% 20%, #fff, #f6e6ef);
}
.page-visual-card div {
padding: 16px 18px;
display: grid;
gap: 4px;
}
.page-visual-card strong {
font-size: 20px;
}
.page-visual-card span {
color: var(--muted);
}
.product-thumb img,
.result-card img,
.snapshot-box img {
transform: scale(1.03);
}
.product-card img {
transition:
transform 0.3s ease,
filter 0.3s ease;
}
@media (hover: hover) {
.product-card:hover img {
transform: scale(1.09) rotate(-1deg);
}
}
input,
select,
textarea {
font-size: 16px;
}
@media (max-width: 1100px) {
.feature-grid[style],
.mini-stats {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.addon-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
body {
padding-bottom: 84px;
}
.container {
width: calc(100% - 22px);
}
.header-main {
position: sticky;
top: 0;
}
.navbar {
top: 108px;
}
.navbar .container {
padding: 6px 0;
gap: 8px;
}
.navbar a {
background: #fff;
border: 1px solid #e9d6e6;
border-radius: 999px;
padding: 9px 13px;
font-size: 13px;
}
.hero-grid-refined,
.hero-card-image {
display: block;
}
.hero-image-side {
display: block;
min-height: 240px;
}
.hero-banner-photo {
height: 260px;
}
.feature-grid[style],
.feature-grid,
.mini-stats,
.status-steps,
.date-options,
.field-grid,
.form-grid,
.choice-grid,
.kpi-row {
grid-template-columns: 1fr !important;
}
.checkout-layout,
.page-two-col,
.plan-grid {
display: grid;
grid-template-columns: 1fr !important;
}
.panel,
.checkout-card,
.summary-card {
padding: 18px !important;
border-radius: 22px;
}
.page-visual-card img {
height: 220px;
}
.product-row,
.listing-grid,
.addon-grid,
.occasion-row,
.sub-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px;
}
.product-card {
padding: 10px;
border-radius: 18px;
}
.product-thumb {
border-radius: 16px;
}
.product-card h4 {
font-size: 14px;
}
.price {
font-size: 16px;
}
.quick-add {
min-height: 40px;
font-size: 13px;
}
.cta-row {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.cta-row .btn {
width: 100%;
}
.footer {
margin-bottom: 80px;
}
}
@media (max-width: 480px) {
.product-row,
.listing-grid,
.addon-grid,
.occasion-row,
.sub-product-grid {
grid-template-columns: 1fr !important;
}
.header-search-wrap {
grid-template-columns: 1fr 46px !important;
}
.location-trigger {
min-width: 0;
}
.search-modern input::placeholder {
font-size: 13px;
}
.summary-item,
.result-card,
.snapshot-box {
grid-template-columns: 62px 1fr !important;
}
.result-card > div:last-child,
.snapshot-box > div:last-child {
grid-column: 2;
}
.sticky-checkout {
bottom: 82px;
}
}
/* === Research-inspired premium storefront pass: responsive, dynamic, real-photo focused === */
:root {
--glass: rgba(255, 255, 255, 0.78);
--deep: #2d1731;
--warm: #fff8fb;
}
html {
scroll-behavior: smooth;
}
body {
background:
radial-gradient(
circle at 10% -10%,
rgba(235, 77, 151, 0.14),
transparent 34rem
),
radial-gradient(
circle at 90% 5%,
rgba(246, 39, 128, 0.12),
transparent 30rem
),
var(--bg);
}
.header-main {
backdrop-filter: saturate(1.4) blur(12px);
background: rgba(255, 255, 255, 0.92);
}
.hero-card-image,
.hero-card {
position: relative;
isolation: isolate;
overflow: hidden;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.96),
rgba(255, 239, 247, 0.9)
),
radial-gradient(
circle at 84% 10%,
rgba(235, 77, 151, 0.18),
transparent 20rem
);
}
.hero-card-image::after {
content: "";
position: absolute;
width: 280px;
height: 280px;
border-radius: 50%;
right: -110px;
bottom: -100px;
background: radial-gradient(
circle,
rgba(235, 77, 151, 0.22),
transparent 70%
);
z-index: -1;
}
.hero-banner-photo,
.main-product-photo,
.gallery-photo,
.photo-fit,
.page-visual-card img {
background: #fff;
object-fit: cover;
}
.hero-banner-photo {
border-radius: 30px;
box-shadow: 0 24px 60px rgba(246, 39, 128, 0.16);
}
.product-card,
.occasion-card,
.banner,
.panel,
.checkout-card,
.summary-card,
.plan-card {
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
@media (hover: hover) {
.product-card:hover,
.occasion-card:hover,
.banner:hover,
.panel:hover,
.plan-card:hover {
transform: translateY(-5px);
box-shadow: 0 22px 48px rgba(79, 40, 74, 0.14);
border-color: rgba(235, 77, 151, 0.32);
}
}
.product-card {
background: linear-gradient(180deg, #fff, #fffafd);
}
.product-thumb,
.thumb-wrap {
background: linear-gradient(135deg, #fff, #f5edf6);
}
.product-card .meta::before {
content: "● ";
color: var(--green);
}
.quick-add {
opacity: 0.96;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.quick-add:active {
transform: scale(0.97);
}
.mobile-bottom-nav {
display: none;
}
.floating-support {
position: fixed;
right: 18px;
bottom: calc(96px + env(safe-area-inset-bottom));
z-index: 80;
width: 54px;
height: 54px;
border-radius: 18px;
display: grid;
place-items: center;
color: #fff;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
box-shadow: 0 18px 42px rgba(246, 39, 128, 0.25);
font-size: 23px;
}
.gg-skeleton {
position: relative;
overflow: hidden;
background: #f3e9f2;
}
.gg-skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.6),
transparent
);
animation: ggShimmer 1.4s infinite;
}
@keyframes ggShimmer {
to {
transform: translateX(100%);
}
}
.reveal-on-scroll {
opacity: 0;
transform: translateY(18px);
}
.reveal-on-scroll.is-visible {
opacity: 1;
transform: none;
transition:
opacity 0.55s ease,
transform 0.55s ease;
}
img[loading="lazy"] {
content-visibility: auto;
}
.badge-pill {
box-shadow: 0 10px 22px rgba(235, 77, 151, 0.12);
}
.select,
input,
textarea,
.search-modern {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
@media (min-width: 1025px) {
.listing-grid,
.product-row {
align-items: stretch;
}
.product-card {
min-height: 100%;
}
.hero-grid-refined {
align-items: stretch;
}
}
@media (max-width: 900px) {
.topbar {
display: none;
}
.header-row {
grid-template-columns: 1fr auto;
gap: 10px;
}
.logo {
min-width: 0;
}
.header-actions .icon-btn span:not(.badge) {
display: none;
}
.header-search-wrap {
grid-column: 1 / -1;
order: 3;
width: 100%;
}
.hero-copy h1 {
font-size: clamp(31px, 9vw, 42px);
}
.section-head {
align-items: flex-start;
gap: 10px;
}
.product-detail-grid,
.checkout-layout,
.listing-layout {
grid-template-columns: 1fr !important;
}
.filters-sidebar {
position: fixed !important;
inset: auto 0 0 0;
z-index: 150;
max-height: 82vh;
overflow: auto;
transform: translateY(104%);
transition: transform 0.28s ease;
border-radius: 26px 26px 0 0 !important;
box-shadow: 0 -24px 60px rgba(31, 32, 48, 0.2);
}
body.filters-open .filters-sidebar {
transform: translateY(0);
}
.mobile-filter-toggle {
display: flex !important;
position: sticky;
top: 74px;
z-index: 35;
width: 100%;
margin: 0 0 12px;
}
}
@media (max-width: 768px) {
body {
padding-bottom: calc(82px + env(safe-area-inset-bottom));
}
.mobile-bottom-nav {
position: fixed;
left: 10px;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: 120;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
padding: 8px;
border: 1px solid rgba(239, 215, 228, 0.95);
border-radius: 24px;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(16px);
box-shadow: 0 16px 44px rgba(79, 40, 74, 0.18);
}
.mobile-bottom-nav a {
display: grid;
place-items: center;
gap: 3px;
min-height: 48px;
border-radius: 17px;
color: #655d6b;
font-size: 11px;
font-weight: 800;
}
.mobile-bottom-nav a span:first-child {
font-size: 18px;
}
.mobile-bottom-nav a.active {
background: #faeaf3;
color: var(--brand);
}
.floating-support {
bottom: calc(92px + env(safe-area-inset-bottom));
right: 14px;
width: 48px;
height: 48px;
border-radius: 16px;
}
.section {
padding: 18px 0;
}
.page-pad {
padding-top: 14px;
}
.hero-card {
padding: 18px;
}
.hero-image-side {
margin-top: 18px;
}
.product-card .meta {
font-size: 12px;
}
.gallery-grid,
.product-gallery {
grid-template-columns: 1fr !important;
}
.main-product-photo {
max-height: 430px;
}
.location-modal {
width: calc(100% - 18px) !important;
border-radius: 24px !important;
}
}
@media (max-width: 520px) {
.container {
width: calc(100% - 18px);
}
.logo-mark {
width: 34px;
height: 34px;
}
.logo span:last-child {
font-size: 17px;
}
.product-row,
.listing-grid,
.addon-grid,
.occasion-row,
.sub-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.product-card h4 {
font-size: 13px;
line-height: 1.25;
}
.product-thumb {
aspect-ratio: 1/1.05;
}
.quick-add {
padding: 10px 8px;
min-height: 38px;
}
.price {
font-size: 15px;
}
.btn {
min-height: 48px;
}
.hero-banner-photo {
height: 220px !important;
}
.page-visual-card img {
height: 190px !important;
}
}
@media (max-width: 360px) {
.product-row,
.listing-grid,
.addon-grid,
.occasion-row,
.sub-product-grid {
grid-template-columns: 1fr !important;
}
}
/* === Production UI Enhancement Pass: modern, responsive, dynamic === */
:root {
--surface-glass: rgba(255, 255, 255, 0.78);
--focus-ring: 0 0 0 4px rgba(235, 77, 151, 0.18);
--ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}
html {
scroll-behavior: smooth;
}
body {
min-width: 320px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.header-main.is-scrolled {
box-shadow: 0 14px 40px rgba(79, 40, 74, 0.1);
border-bottom-color: rgba(235, 77, 151, 0.18);
}
.navbar a,
.icon-btn,
.location-trigger,
.ai-assistant-trigger {
transition:
color 0.2s ease,
background 0.2s ease,
transform 0.2s ease;
}
@media (hover: hover) {
.navbar a:hover,
.icon-btn:hover,
.location-trigger:hover,
.ai-assistant-trigger:hover {
color: var(--brand);
transform: translateY(-1px);
}
}
.search-modern {
position: relative;
}
.search-suggestions {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 8px);
z-index: 90;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 22px 55px rgba(79, 40, 74, 0.16);
overflow: hidden;
}
.search-suggestion {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 12px 15px;
border: 0;
background: #fff;
color: #302d39;
text-align: left;
font-weight: 700;
}
.search-suggestion small {
color: var(--muted);
font-weight: 600;
}
.search-suggestion:hover,
.search-suggestion:focus-visible {
background: #fff4fa;
}
.hero-card-image {
min-height: clamp(430px, 48vw, 620px);
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.92fr);
align-items: center;
gap: 24px;
}
.hero-copy-image {
position: relative;
z-index: 2;
}
.hero-banner-photo {
width: 100%;
height: clamp(300px, 38vw, 520px);
object-fit: cover;
transform: translateZ(0);
}
.hero-image-side {
position: relative;
}
.hero-image-side::before {
content: "Fresh today";
position: absolute;
z-index: 2;
top: 18px;
left: 18px;
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(10px);
color: var(--brand);
font-size: 12px;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
box-shadow: 0 12px 26px rgba(79, 40, 74, 0.12);
}
.product-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.product-card h4 {
margin-bottom: 8px;
}
.product-card .price {
margin-top: auto;
}
.product-card::after {
content: "";
position: absolute;
inset: auto -20% -50% -20%;
height: 80%;
background: radial-gradient(
circle at 50% 100%,
rgba(235, 77, 151, 0.1),
transparent 58%
);
pointer-events: none;
}
.product-thumb {
aspect-ratio: 1/1;
overflow: hidden;
border-radius: 18px;
}
.product-thumb img,
.photo-fit {
width: 100%;
height: 100%;
transition:
transform 0.45s var(--ease-spring),
filter 0.3s ease;
}
@media (hover: hover) {
.product-card:hover .product-thumb img,
.product-card:hover .photo-fit {
transform: scale(1.055);
}
}
.quick-add {
width: calc(100% - 20px);
margin: 10px;
min-height: 42px;
border: 0;
border-radius: 13px;
color: #fff;
background: linear-gradient(90deg, var(--brand), var(--brand-2));
font-weight: 900;
box-shadow: 0 12px 26px rgba(246, 39, 128, 0.18);
}
.quick-add.added {
background: linear-gradient(90deg, #16a34a, #0f8c3d);
}
.wishlist-toggle {
position: absolute;
z-index: 5;
top: 12px;
right: 12px;
width: 38px;
height: 38px;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.75);
border-radius: 999px;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(10px);
box-shadow: 0 10px 22px rgba(79, 40, 74, 0.11);
}
.wishlist-toggle.active {
color: var(--brand);
}
.toast {
position: fixed;
left: 50%;
bottom: calc(96px + env(safe-area-inset-bottom));
transform: translate(-50%, 20px);
z-index: 300;
opacity: 0;
pointer-events: none;
padding: 13px 18px;
border-radius: 999px;
background: #1f2030;
color: #fff;
font-weight: 800;
box-shadow: 0 18px 50px rgba(31, 32, 48, 0.28);
transition:
opacity 0.24s ease,
transform 0.24s ease;
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
.location-modal,
.product-drawer-panel {
animation: modalIn 0.28s var(--ease-spring);
}
@keyframes modalIn {
from {
opacity: 0;
transform: translateY(18px) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
.responsive-filter-toggle,
.mobile-filter-toggle {
display: none;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid var(--line);
border-radius: 14px;
background: #fff;
color: #302d39;
font-weight: 900;
min-height: 48px;
padding: 12px 16px;
box-shadow: var(--shadow);
}
.filter-backdrop {
position: fixed;
inset: 0;
z-index: 145;
background: rgba(31, 32, 48, 0.38);
opacity: 0;
pointer-events: none;
transition: opacity 0.24s ease;
}
body.filters-open .filter-backdrop {
opacity: 1;
pointer-events: auto;
}
.sidebar {
transition:
transform 0.28s var(--ease-spring),
box-shadow 0.28s ease;
}
.page-visual-card img,
.gallery-photo,
.main-product-photo {
border-radius: 22px;
box-shadow: 0 18px 45px rgba(79, 40, 74, 0.11);
}
.form-row input,
.form-row textarea,
.checkout-card input,
.checkout-card select,
.checkout-card textarea,
.select {
min-height: 48px;
border-radius: 13px;
}
@media (min-width: 901px) {
.listing-layout {
align-items: start;
}
.sidebar {
position: sticky;
top: 132px;
}
.listing-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1200px) {
.listing-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.hero-card-image {
grid-template-columns: 1fr;
min-height: auto;
}
.header-main {
position: sticky;
top: 0;
}
.navbar .container {
padding: 2px 0 8px;
}
.responsive-filter-toggle,
.mobile-filter-toggle {
display: flex;
}
.sidebar {
position: fixed !important;
left: 10px;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom));
z-index: 150;
max-height: min(78vh, 640px);
overflow: auto;
transform: translateY(calc(100% + 28px));
border-radius: 26px !important;
background: #fff;
box-shadow: 0 -24px 60px rgba(31, 32, 48, 0.22);
padding-bottom: 24px;
}
body.filters-open .sidebar {
transform: translateY(0);
}
.sortbar {
gap: 12px;
align-items: stretch;
}
.sortbar > div {
min-width: 0;
}
}
@media (max-width: 620px) {
.container {
width: calc(100% - 20px);
}
.header-row {
padding: 9px 0;
}
.header-search-wrap {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
}
.location-trigger {
max-width: 112px;
}
.search input {
font-size: 14px;
padding: 12px 10px;
}
.search button {
width: 40px;
height: 40px;
}
.hero-card-image,
.hero-card {
border-radius: 22px;
}
.hero-copy h1 {
font-size: clamp(30px, 10vw, 40px);
}
.cta-row .btn {
flex: 1 1 150px;
}
.stat-strip {
grid-template-columns: 1fr 1fr !important;
gap: 9px;
}
.stat-item {
padding: 12px 10px;
font-size: 12px;
}
.section-head h2 {
font-size: 22px;
}
.sortbar h1 {
font-size: 26px !important;
}
.product-card {
border-radius: 18px;
}
.product-card {
padding: 8px !important;
}
.product-thumb {
border-radius: 15px;
}
.wishlist-toggle {
width: 34px;
height: 34px;
}
}
@media (max-width: 420px) {
.stat-strip {
grid-template-columns: 1fr !important;
}
.header-search-wrap {
grid-template-columns: 1fr auto;
}
.location-trigger {
grid-column: 1/-1;
max-width: none;
justify-content: center;
}
.ai-assistant-trigger {
min-width: 42px;
}
.mobile-bottom-nav {
left: 6px;
right: 6px;
border-radius: 20px;
}
.mobile-bottom-nav a {
font-size: 10px;
min-height: 45px;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
/* === Final modernization pass: design tokens, responsiveness, footer, drawer === */
:root {
--ease-premium: cubic-bezier(0.2, 0.8, 0.2, 1);
--surface-glass: rgba(255, 255, 255, 0.82);
--brand-gradient: linear-gradient(
135deg,
#f62780 0%,
#f62780 52%,
#4f2a58 100%
);
}
html {
scroll-behavior: smooth;
}
body {
font-size: 16px;
line-height: 1.55;
text-rendering: optimizeLegibility;
}
:focus-visible {
outline: 3px solid rgba(235, 77, 151, 0.38);
outline-offset: 3px;
border-radius: 10px;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--brand);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.btn,
.product-card,
.occasion-card,
.panel,
.checkout-card,
.summary-card,
.mini-card,
.banner {
transition:
transform 0.25s var(--ease-premium),
box-shadow 0.25s ease,
border-color 0.25s ease,
background 0.25s ease;
}
.btn:hover,
.product-card:hover,
.occasion-card:hover,
.mini-card:hover {
transform: translateY(-3px);
}
.btn:active,
.addon-option:active {
transform: translateY(0) scale(0.98);
}
.btn-primary {
background: var(--brand-gradient);
border-color: transparent;
box-shadow: 0 16px 30px rgba(235, 77, 151, 0.22);
}
.product-thumb,
.hero-media,
.page-visual-card {
overflow: hidden;
background: linear-gradient(135deg, #fff, #f8f0f7);
}
.product-thumb img,
.hero-media img,
.page-visual-card img,
.realistic-product-photo {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s var(--ease-premium);
}
.product-card:hover img,
.page-visual-card:hover img {
transform: scale(1.05);
}
.header-main {
backdrop-filter: saturate(1.2) blur(14px);
background: rgba(255, 255, 255, 0.94);
}
.navbar a,
.footer a {
transition:
color 0.2s ease,
transform 0.2s ease,
opacity 0.2s ease;
}
.navbar a:hover,
.footer a:hover {
color: var(--brand);
transform: translateY(-1px);
}
.search:focus-within,
.footer-subscribe:focus-within {
box-shadow: 0 0 0 4px rgba(235, 77, 151, 0.12);
border-color: rgba(235, 77, 151, 0.45);
}
.site-footer {
margin-top: 44px;
padding: 0 0 calc(22px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, #fff 0%, #fbf2f9 100%);
border-top: 1px solid var(--line);
color: var(--text);
}
.footer-newsletter {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
gap: 24px;
align-items: center;
margin-top: -28px;
padding: 28px;
border-radius: 28px;
background: var(--brand-gradient);
color: #fff;
box-shadow: 0 22px 55px rgba(246, 39, 128, 0.22);
}
.footer-newsletter h2 {
margin: 6px 0 6px;
font-size: clamp(24px, 4vw, 38px);
line-height: 1.1;
}
.footer-newsletter p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
}
.footer-newsletter .eyebrow {
color: #f1daea;
}
.footer-subscribe {
display: flex;
gap: 8px;
padding: 6px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(255, 255, 255, 0.38);
}
.footer-subscribe input {
min-width: 0;
flex: 1;
border: 0;
outline: 0;
padding: 13px 14px;
border-radius: 14px;
background: #fff;
}
.footer-subscribe button {
border: 0;
border-radius: 14px;
padding: 12px 18px;
background: #1f2030;
color: #fff;
font-weight: 800;
}
.footer-grid {
display: grid;
grid-template-columns: 1.35fr repeat(3, 1fr);
gap: 28px;
padding: 42px 0 24px;
}
.footer-brand p,
.footer-col p,
.footer-note {
color: var(--muted);
margin: 10px 0;
}
.footer-col {
display: flex;
flex-direction: column;
gap: 9px;
}
.footer-col h3 {
margin: 0 0 6px;
font-size: 16px;
}
.social-links {
display: flex;
gap: 10px;
margin-top: 16px;
}
.social-links a {
width: 38px;
height: 38px;
border-radius: 999px;
display: grid;
place-items: center;
background: #fff;
border: 1px solid var(--line);
box-shadow: var(--shadow);
font-weight: 800;
}
.footer-bottom {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: center;
padding-top: 18px;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: 14px;
}
.addon-drawer {
position: fixed;
inset: 0;
z-index: 300;
pointer-events: none;
}
.addon-drawer.is-open {
pointer-events: auto;
}
.addon-overlay {
position: absolute;
inset: 0;
background: rgba(31, 32, 48, 0.48);
opacity: 0;
transition: opacity 0.28s ease;
backdrop-filter: blur(4px);
}
.addon-drawer.is-open .addon-overlay {
opacity: 1;
}
.addon-panel {
position: absolute;
right: 0;
top: 0;
width: min(440px, 100%);
height: 100%;
overflow: auto;
background: #fff;
border-radius: 30px 0 0 30px;
box-shadow: -24px 0 70px rgba(31, 32, 48, 0.24);
padding: 26px;
transform: translateX(110%);
transition: transform 0.36s var(--ease-premium);
}
.addon-drawer.is-open .addon-panel {
transform: translateX(0);
}
.addon-close {
position: absolute;
right: 18px;
top: 16px;
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: var(--soft);
font-size: 28px;
color: var(--brand-2);
}
.addon-panel-head h2 {
margin: 8px 44px 8px 0;
font-size: clamp(26px, 4vw, 36px);
line-height: 1.05;
}
.addon-panel-head p {
margin: 0 0 18px;
color: var(--muted);
}
.addon-options {
display: grid;
gap: 12px;
}
.addon-option {
width: 100%;
display: grid;
grid-template-columns: 78px 1fr 36px;
gap: 14px;
align-items: center;
text-align: left;
padding: 10px;
border: 1px solid var(--line);
border-radius: 20px;
background: #fff;
}
.addon-option:hover,
.addon-option.selected {
border-color: rgba(235, 77, 151, 0.55);
box-shadow: 0 14px 34px rgba(79, 40, 74, 0.1);
background: #fffafd;
}
.addon-option img {
width: 78px;
height: 72px;
object-fit: cover;
border-radius: 16px;
}
.addon-option span {
display: grid;
}
.addon-option small {
color: var(--muted);
font-weight: 700;
}
.addon-option b {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--soft);
color: var(--brand);
font-size: 16px;
}
.addon-option.selected b {
background: var(--brand);
color: #fff;
}
.drawer-summary {
position: sticky;
bottom: 86px;
margin-top: 18px;
padding: 15px 16px;
border-radius: 18px;
background: #fbf5fb;
border: 1px solid var(--line);
display: flex;
justify-content: space-between;
align-items: center;
}
.drawer-actions {
position: sticky;
bottom: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 12px -4px -8px;
padding: 12px 4px 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), #fff 28%);
}
.toast-message {
position: fixed;
left: 50%;
bottom: calc(94px + env(safe-area-inset-bottom));
z-index: 500;
transform: translate(-50%, 20px);
opacity: 0;
background: #1f2030;
color: #fff;
border-radius: 999px;
padding: 12px 18px;
box-shadow: 0 18px 40px rgba(31, 32, 48, 0.25);
transition: 0.25s ease;
}
.toast-message.show {
transform: translate(-50%, 0);
opacity: 1;
}
@media (max-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.header-row {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
body {
font-size: 15px;
padding-bottom: calc(70px + env(safe-area-inset-bottom));
}
.page-pad,
.section {
padding-block: 18px;
}
.footer-newsletter {
grid-template-columns: 1fr;
margin-top: 0;
padding: 22px;
border-radius: 24px;
}
.footer-subscribe {
flex-direction: column;
}
.footer-subscribe button {
width: 100%;
}
.footer-grid {
grid-template-columns: 1fr;
gap: 22px;
padding: 30px 0 20px;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
}
.addon-panel {
top: auto;
bottom: 0;
height: min(86vh, 720px);
width: 100%;
border-radius: 28px 28px 0 0;
transform: translateY(110%);
padding: 22px 16px calc(20px + env(safe-area-inset-bottom));
}
.addon-drawer.is-open .addon-panel {
transform: translateY(0);
}
.addon-option {
grid-template-columns: 70px 1fr 32px;
}
.addon-option img {
width: 70px;
height: 66px;
}
.drawer-actions {
grid-template-columns: 1fr;
}
}
@media (max-width: 520px) {
.topbar {
display: none;
}
.container {
width: calc(100% - 22px);
}
.btn {
min-height: 46px;
justify-content: center;
}
.product-card,
.panel,
.checkout-card,
.summary-card {
border-radius: 18px;
}
.addon-panel-head h2 {
font-size: 28px;
}
}
/* === GoGiftings requested final polish === */
.site-footer {
text-align: justify;
text-justify: inter-word;
}
.footer-newsletter,
.footer-grid,
.footer-bottom {
align-items: start;
}
.footer-brand p,
.footer-col p {
max-width: 34ch;
line-height: 1.75;
text-align: justify;
}
.footer-col a {
display: block;
padding: 5px 0;
}
.footer-bottom {
gap: 16px;
flex-wrap: wrap;
justify-content: space-between;
text-align: left;
}
.policy-page {
padding: 34px !important;
margin-top: 12px;
}
.policy-page h1 {
font-size: clamp(30px, 5vw, 54px);
margin: 8px 0 10px;
}
.policy-page > p {
font-size: 18px;
color: #6f6977;
max-width: 760px;
}
.policy-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
margin: 24px 0;
}
.category-showcase {
margin-top: 24px;
}
.category-showcase-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 14px;
}
.category-tile {
position: relative;
min-height: 180px;
border-radius: 26px;
overflow: hidden;
display: flex;
align-items: end;
padding: 16px;
background: #fff;
box-shadow: 0 18px 50px rgba(43, 26, 39, 0.08);
isolation: isolate;
}
.category-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -2;
transition: 0.35s ease;
}
.category-tile:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.58));
z-index: -1;
}
.category-tile:hover img {
transform: scale(1.08);
}
.category-tile span {
color: #fff;
font-weight: 850;
font-size: 18px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.dynamic-section {
margin-top: 24px;
}
.dynamic-product-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 16px;
}
.product-card .quick-add,
.product-card [data-addon-open] {
cursor: pointer;
}
.load-more-sentinel {
text-align: center;
color: #8b7b87;
padding: 28px 0;
font-weight: 700;
}
.addon-product-note {
margin: 0 0 14px;
padding: 12px 14px;
border-radius: 18px;
background: #fff4fa;
color: #9c316a;
font-weight: 800;
}
@media (max-width: 1100px) {
.category-showcase-grid {
grid-template-columns: repeat(3, 1fr);
}
.dynamic-product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 760px) {
.policy-grid,
.category-showcase-grid,
.dynamic-product-grid {
grid-template-columns: 1fr 1fr;
}
.footer-brand p,
.footer-col p {
text-align: left;
}
.site-footer {
text-align: left;
}
}
@media (max-width: 520px) {
.policy-grid,
.category-showcase-grid,
.dynamic-product-grid {
grid-template-columns: 1fr;
}
.category-tile {
min-height: 150px;
}
}
/* === Requested theme update: category, hero, compact trust block, dark offer, refined footer === */
.hero-grid-refined {
align-items: stretch;
grid-template-columns: minmax(0, 1.42fr) minmax(300px, 0.58fr);
}
.hero-card-image {
position: relative;
overflow: hidden;
min-height: 430px;
display: grid;
grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.9fr);
align-items: center;
padding: 34px;
background: linear-gradient(135deg, #fbf5fb 0%, #fff 45%, #efe0ed 100%);
}
.hero-card-image:before {
content: "";
position: absolute;
inset: auto -9% -28% 48%;
height: 360px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(235, 77, 151, 0.22),
transparent 68%
);
pointer-events: none;
}
.hero-copy-image {
position: relative;
z-index: 2;
max-width: 540px;
}
.hero-copy-image h1 {
font-size: clamp(38px, 5vw, 66px);
letter-spacing: -0.04em;
}
.hero-copy-image p {
font-size: 18px;
}
.hero-image-side {
position: relative;
z-index: 1;
height: 100%;
min-height: 360px;
border-radius: 34px;
overflow: hidden;
box-shadow: 0 28px 70px rgba(87, 42, 114, 0.18);
}
.hero-banner-photo {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
}
.hero-image-side:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(255, 247, 251, 0.08),
rgba(87, 42, 114, 0.2)
);
}
.why-panel-compact {
padding: 16px !important;
border-radius: 26px;
align-self: start;
}
.why-head {
margin-bottom: 10px !important;
}
.why-head h2 {
font-size: 22px;
margin: 4px 0 0;
line-height: 1.1;
}
.why-grid-compact {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.why-mini {
display: flex;
align-items: center;
gap: 9px;
padding: 11px 10px;
border: 1px solid var(--line);
border-radius: 16px;
background: #fffafc;
font-size: 18px;
}
.why-mini span {
display: grid;
line-height: 1.1;
}
.why-mini strong {
font-size: 13px;
color: #272333;
}
.why-mini small {
font-size: 11px;
color: var(--muted);
margin-top: 3px;
}
.ai-mini-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 12px;
padding: 13px;
border-radius: 18px;
background: linear-gradient(135deg, #fff, #f7ecf5);
border: 1px solid var(--line);
}
.ai-mini-banner div {
display: grid;
line-height: 1.2;
}
.ai-mini-banner small {
color: var(--muted);
font-size: 12px;
margin-top: 4px;
}
.ai-mini-banner .btn {
padding: 10px 14px;
border-radius: 12px;
min-height: auto;
}
.shop-category-section {
padding-top: 18px;
}
.category-like-occasion .category-occasion-card {
position: relative;
overflow: hidden;
min-height: 132px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 7px;
font-weight: 800;
background: linear-gradient(145deg, #fff 0%, #fbf5fb 100%);
}
.category-like-occasion .category-occasion-card:before {
content: "";
position: absolute;
inset: auto -18% -34% -18%;
height: 85px;
background: radial-gradient(
circle,
rgba(235, 77, 151, 0.14),
transparent 70%
);
}
.category-like-occasion .oc-ico {
position: relative;
width: 64px;
height: 64px;
margin: 0;
border-radius: 22px;
background: linear-gradient(135deg, #fff, #f3ddea);
box-shadow:
inset 0 0 0 1px rgba(235, 77, 151, 0.16),
0 12px 24px rgba(246, 39, 128, 0.08);
}
.category-like-occasion span {
position: relative;
z-index: 1;
}
.category-like-occasion .category-occasion-card:hover {
border-color: rgba(235, 77, 151, 0.45);
box-shadow: 0 18px 44px rgba(246, 39, 128, 0.13);
}
.dark-offer-banner {
position: relative;
overflow: hidden;
background: linear-gradient(
135deg,
#191523 0%,
#3b1b45 54%,
#111018 100%
) !important;
border-color: rgba(255, 255, 255, 0.08) !important;
color: #fff;
}
.dark-offer-banner:before {
content: "";
position: absolute;
right: -45px;
top: -50px;
width: 160px;
height: 160px;
border-radius: 50%;
background: rgba(235, 77, 151, 0.25);
filter: blur(4px);
}
.dark-offer-banner h3,
.dark-offer-banner p,
.dark-offer-banner span {
position: relative;
z-index: 1;
color: #fff;
}
.dark-offer-banner span {
display: inline-block;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #ffd6e9;
font-weight: 850;
margin-bottom: 5px;
}
.dark-offer-banner .btn-soft {
position: relative;
z-index: 1;
background: #fff;
color: #2a1831;
border-color: #fff;
}
.premium-footer {
position: relative;
margin-top: 54px;
padding-bottom: calc(22px + env(safe-area-inset-bottom));
background: linear-gradient(180deg, #fff 0%, #fbf2f9 48%, #f1e4ef 100%);
border-top: 1px solid var(--line);
text-align: left;
}
.footer-ribbon {
padding-top: 0 !important;
}
.footer-ribbon-card {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(290px, 0.78fr);
gap: 22px;
align-items: center;
padding: 26px;
border-radius: 30px;
background: linear-gradient(135deg, #f62780 0%, #f62780 55%, #4f2a58 100%);
box-shadow: 0 24px 70px rgba(87, 42, 114, 0.22);
color: #fff;
transform: translateY(-26px);
}
.footer-ribbon-card h2 {
margin: 5px 0 6px;
font-size: clamp(24px, 3.6vw, 40px);
line-height: 1.05;
letter-spacing: -0.03em;
}
.footer-ribbon-card p {
margin: 0;
color: rgba(255, 255, 255, 0.82);
max-width: 62ch;
}
.footer-ribbon-card .eyebrow {
color: #ffe0ef;
}
.footer-main-grid {
display: grid !important;
grid-template-columns: 1.25fr 0.75fr 0.75fr 1fr;
gap: 22px;
align-items: start;
padding: 10px 0 26px !important;
}
.footer-brand-card {
padding: 22px;
border: 1px solid rgba(235, 77, 151, 0.18);
border-radius: 26px;
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 16px 46px rgba(79, 40, 74, 0.07);
}
.footer-brand-card p,
.footer-mini-info p {
color: var(--muted);
line-height: 1.65;
margin: 13px 0 0;
text-align: left;
max-width: none;
}
.footer-contact-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.footer-contact-pills a,
.footer-badges span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 12px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--line);
font-weight: 800;
font-size: 13px;
color: #7c2e70;
}
.footer-col {
gap: 8px;
}
.footer-col h3 {
font-size: 15px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #4f2a58;
margin-bottom: 10px;
}
.footer-col a {
padding: 6px 0;
color: #554d5c;
font-weight: 650;
}
.footer-mini-info {
padding: 20px;
border-radius: 24px;
background: #fff;
border: 1px solid var(--line);
}
.footer-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.footer-badges span {
background: #fff6fb;
color: #5a1a93;
}
.refined-footer-bottom {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px;
padding-top: 18px !important;
border-top: 1px solid var(--line);
color: #716a78;
}
@media (max-width: 1024px) {
.hero-grid-refined {
grid-template-columns: 1fr;
}
.hero-card-image {
grid-template-columns: 1fr;
}
.hero-image-side {
min-height: 300px;
}
.footer-main-grid {
grid-template-columns: 1fr 1fr !important;
}
.footer-ribbon-card {
grid-template-columns: 1fr;
}
}
@media (max-width: 760px) {
.hero-card-image {
padding: 22px;
border-radius: 26px;
}
.hero-copy-image h1 {
font-size: 38px;
}
.why-grid-compact {
grid-template-columns: 1fr 1fr;
}
.footer-ribbon-card {
transform: none;
padding: 22px;
border-radius: 24px;
}
.footer-main-grid {
grid-template-columns: 1fr !important;
padding-top: 24px !important;
}
.refined-footer-bottom {
align-items: flex-start !important;
flex-direction: column;
}
.premium-footer {
text-align: left;
}
.category-like-occasion .category-occasion-card {
min-height: 118px;
}
}
@media (max-width: 520px) {
.hero-image-side {
min-height: 240px;
}
.why-grid-compact {
grid-template-columns: 1fr;
}
.category-like-occasion .category-occasion-card {
min-height: 106px;
}
.category-like-occasion .oc-ico {
width: 56px;
height: 56px;
border-radius: 18px;
}
.footer-subscribe {
flex-direction: column;
}
.footer-subscribe button {
width: 100%;
}
}
/* === Compact hero size update: reduce left hero block to match right trust card === */
.hero-grid-refined {
align-items: start;
grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.55fr);
}
.hero-card-image {
min-height: 370px;
padding: 22px 26px;
grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.82fr);
border-radius: 26px;
}
.hero-card-image:before {
height: 220px;
inset: auto -6% -20% 48%;
}
.hero-copy-image {
max-width: 430px;
}
.hero-copy-image .badge-pill {
padding: 8px 14px;
font-size: 11px;
letter-spacing: 0.16em;
}
.hero-copy-image h1 {
font-size: clamp(34px, 4vw, 54px);
line-height: 1.08;
margin: 14px 0 12px;
}
.hero-copy-image p {
font-size: 16px;
line-height: 1.45;
max-width: 390px;
}
.hero-copy-image .cta-row {
margin-top: 18px;
}
.hero-copy-image .btn {
padding: 12px 18px;
border-radius: 12px;
}
.hero-image-side {
min-height: 300px;
border-radius: 28px;
}
@media (max-width: 1100px) {
.hero-grid-refined {
grid-template-columns: 1fr;
}
.hero-card-image {
min-height: 360px;
}
.hero-image-side {
min-height: 280px;
}
}
@media (max-width: 760px) {
.hero-card-image {
grid-template-columns: 1fr;
padding: 22px;
}
.hero-image-side {
min-height: 240px;
}
.hero-copy-image h1 {
font-size: 38px;
}
}
/* === Next upgrade: reference-matched hero + raised category block === */
.page-pad {
padding-top: 18px;
}
.hero-grid-refined {
display: grid;
grid-template-columns: minmax(0, 1.32fr) minmax(360px, 0.68fr) !important;
gap: 22px;
align-items: start;
}
.hero-card-image {
min-height: 390px !important;
padding: 22px 24px !important;
grid-template-columns: minmax(0, 0.92fr) minmax(290px, 0.86fr) !important;
align-items: center;
border-radius: 26px !important;
}
.hero-copy-image {
max-width: 420px;
}
.hero-copy-image h1 {
font-size: clamp(34px, 4vw, 52px) !important;
line-height: 1.08 !important;
margin: 14px 0 12px !important;
}
.hero-copy-image p {
font-size: 16px !important;
line-height: 1.45;
max-width: 390px;
}
.hero-copy-image .cta-row {
margin-top: 18px;
}
.hero-copy-image .btn {
padding: 12px 18px;
border-radius: 12px;
}
.hero-image-side {
min-height: 330px !important;
border-radius: 28px !important;
}
.why-panel-compact {
padding: 18px !important;
border-radius: 26px;
display: flex;
flex-direction: column;
gap: 0;
}
.why-head h2 {
font-size: 24px !important;
}
.why-grid-compact {
gap: 10px;
}
.why-mini {
min-height: 62px;
padding: 12px 13px;
border-radius: 16px;
}
.ai-mini-banner {
margin-top: 12px;
min-height: 68px;
}
.side-category-panel {
margin-top: 16px;
padding: 18px;
border: 1px solid var(--line);
border-radius: 26px;
background: #fff;
box-shadow: var(--shadow);
}
.side-category-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.side-category-head h2 {
margin: 0;
font-size: 22px;
letter-spacing: -0.02em;
}
.side-category-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.side-category-card {
min-height: 104px;
padding: 12px 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
text-align: center;
border: 1px solid var(--line);
border-radius: 18px;
background: linear-gradient(145deg, #fff, #fbf5fb);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.side-category-card:hover {
transform: translateY(-4px);
border-color: rgba(235, 77, 151, 0.46);
box-shadow: 0 16px 36px rgba(246, 39, 128, 0.13);
}
.side-category-icon {
font-size: 34px;
line-height: 1;
filter: drop-shadow(0 8px 12px rgba(246, 39, 128, 0.12));
}
.side-category-card strong {
font-size: 13px;
line-height: 1.18;
color: #262334;
}
.stat-strip {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
margin-top: 18px !important;
border-radius: 24px;
}
.section.shop-category-section {
display: none !important;
}
@media (max-width: 1180px) {
.hero-grid-refined {
grid-template-columns: 1fr !important;
}
.hero-card-image {
grid-template-columns: 1fr 1fr !important;
}
.side-category-grid {
grid-template-columns: repeat(6, minmax(110px, 1fr));
overflow: auto;
padding-bottom: 4px;
scroll-snap-type: x proximity;
}
.side-category-card {
scroll-snap-align: start;
}
}
@media (max-width: 760px) {
.hero-card-image {
grid-template-columns: 1fr !important;
min-height: auto !important;
}
.hero-image-side {
min-height: 250px !important;
}
.side-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
overflow: visible;
}
.stat-strip {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 520px) {
.side-category-grid,
.stat-strip {
grid-template-columns: 1fr !important;
}
}
/* FINAL HERO + MOBILE RESPONSIVE UPGRADE */
:root {
--hero-ink: #1e1f31;
}
.page-pad {
padding-top: 18px;
}
.hero-grid-refined {
grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.62fr) !important;
align-items: start !important;
gap: 22px !important;
}
.hero-card-image {
position: relative;
min-height: 420px !important;
padding: 28px !important;
grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.9fr) !important;
align-items: center !important;
background:
radial-gradient(
circle at 78% 20%,
rgba(255, 255, 255, 0.9) 0 18%,
transparent 40%
),
radial-gradient(
circle at 100% 90%,
rgba(235, 77, 151, 0.24),
transparent 34%
),
linear-gradient(135deg, #fff 0%, #fbf5fb 50%, #f7dfeb 100%) !important;
box-shadow: 0 24px 60px rgba(94, 44, 86, 0.1) !important;
}
.hero-card-image:before {
content: "";
position: absolute;
inset: 28px 28px 28px auto;
width: min(44%, 460px);
border-radius: 34px;
background: linear-gradient(
145deg,
rgba(238, 245, 247, 0.9),
rgba(247, 231, 240, 0.84)
);
border: 1px solid rgba(255, 255, 255, 0.78);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 26px 50px rgba(174, 76, 145, 0.16);
pointer-events: none;
}
.hero-card-image:after {
content: "";
position: absolute;
right: 42px;
top: 34px;
width: 360px;
height: 360px;
max-width: 34vw;
max-height: 34vw;
border-radius: 999px;
border: 2px solid rgba(255, 255, 255, 0.78);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.36),
rgba(214, 206, 224, 0.2)
);
pointer-events: none;
}
.hero-copy-image {
position: relative;
z-index: 2;
max-width: 520px;
padding: 14px 0 14px 6px !important;
}
.hero-copy-image h1 {
color: var(--hero-ink);
letter-spacing: -0.055em;
font-size: clamp(46px, 4.2vw, 68px) !important;
line-height: 0.98 !important;
margin: 22px 0 18px !important;
}
.hero-copy-image p {
color: #71677a;
font-size: 18px !important;
line-height: 1.65 !important;
max-width: 470px !important;
}
.hero-image-side {
position: relative;
z-index: 3;
min-height: 360px !important;
height: 100%;
border-radius: 30px;
overflow: hidden;
display: grid;
place-items: center;
background: linear-gradient(160deg, #edf3f6, #f9e9f1);
}
.hero-image-side:before {
content: "Fresh today";
position: absolute;
left: 26px;
top: 24px;
z-index: 4;
background: rgba(255, 255, 255, 0.94);
color: var(--brand);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 999px;
padding: 12px 20px;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 13px;
box-shadow: 0 14px 30px rgba(77, 43, 71, 0.12);
}
.hero-image-side:after {
display: none !important;
}
.hero-banner-photo {
width: 100% !important;
height: 100% !important;
min-height: 360px;
object-fit: cover !important;
object-position: center 44% !important;
transform: scale(1.04);
filter: saturate(1.06) contrast(1.03)
drop-shadow(0 22px 28px rgba(94, 44, 86, 0.2)) !important;
}
.why-panel-compact {
padding: 22px !important;
border-radius: 28px !important;
}
.side-category-panel {
margin-top: 18px !important;
padding-top: 0 !important;
}
.side-category-grid {
gap: 12px !important;
}
.side-category-card {
min-height: 112px !important;
border-radius: 18px !important;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
.side-category-card:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(246, 39, 128, 0.12);
border-color: #f2bed7;
}
.side-category-icon {
font-size: 34px !important;
}
.stat-strip {
margin-top: 18px !important;
grid-template-columns: repeat(4, 1fr) !important;
}
@media (max-width: 1180px) {
.hero-grid-refined {
grid-template-columns: 1fr !important;
}
.hero-card-image {
grid-template-columns: minmax(0, 0.95fr) minmax(300px, 0.85fr) !important;
min-height: 390px !important;
}
.side-category-grid {
grid-template-columns: repeat(6, minmax(118px, 1fr)) !important;
overflow: auto;
padding-bottom: 6px;
scroll-snap-type: x mandatory;
}
.side-category-card {
scroll-snap-align: start;
}
}
@media (max-width: 980px) {
.topbar-inner {
justify-content: center;
text-align: center;
}
.topbar-right {
display: none;
}
.header-row {
grid-template-columns: 1fr auto !important;
gap: 12px !important;
padding: 12px 0 !important;
}
.logo {
font-size: 20px;
}
.header-search-wrap {
grid-column: 1/-1;
order: 3;
width: 100%;
}
.search-modern {
width: 100%;
}
.header-actions {
gap: 10px !important;
}
.label-hide {
display: none;
}
.navbar .container {
gap: 10px;
min-height: 48px;
}
.navbar a {
padding: 9px 12px;
background: #fff;
border: 1px solid var(--line);
border-radius: 999px;
font-size: 13px;
}
.navbar a.active {
background: #f7ecf5;
}
}
@media (max-width: 760px) {
body {
background: #fff8fc;
}
.container {
width: min(100% - 24px, var(--container));
}
.page-pad {
padding: 12px 0 26px;
}
.hero-grid-refined {
gap: 14px !important;
}
.hero-card-image {
display: flex !important;
flex-direction: column !important;
min-height: auto !important;
padding: 18px !important;
border-radius: 24px !important;
}
.hero-card-image:before,
.hero-card-image:after {
display: none !important;
}
.hero-copy-image {
width: 100%;
padding: 0 !important;
order: 2;
}
.hero-copy-image .badge-pill {
font-size: 10px;
padding: 8px 12px;
letter-spacing: 0.14em;
}
.hero-copy-image h1 {
font-size: clamp(34px, 10vw, 46px) !important;
line-height: 1.02 !important;
margin: 16px 0 12px !important;
letter-spacing: -0.045em;
}
.hero-copy-image p {
font-size: 15px !important;
line-height: 1.55 !important;
margin-bottom: 0;
}
.cta-row {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 18px !important;
}
.btn {
padding: 13px 14px !important;
border-radius: 14px !important;
font-size: 14px;
}
.hero-image-side {
order: 1;
width: 100%;
min-height: 230px !important;
height: 230px !important;
border-radius: 22px;
margin-bottom: 18px;
}
.hero-image-side:before {
left: 14px;
top: 14px;
padding: 9px 13px;
font-size: 10px;
}
.hero-banner-photo {
min-height: 230px !important;
height: 230px !important;
object-position: center 45% !important;
}
.why-panel-compact {
padding: 18px !important;
border-radius: 24px !important;
}
.why-head h2 {
font-size: 24px !important;
}
.why-grid-compact {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.why-mini {
padding: 12px !important;
border-radius: 16px !important;
font-size: 16px;
}
.ai-mini-banner {
padding: 12px !important;
border-radius: 18px !important;
gap: 10px;
}
.side-category-panel {
margin-top: 14px !important;
}
.side-category-head h2 {
font-size: 22px !important;
}
.side-category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
overflow: visible !important;
}
.side-category-card {
min-height: 96px !important;
padding: 10px 6px !important;
}
.side-category-icon {
font-size: 28px !important;
}
.side-category-card strong {
font-size: 12px;
line-height: 1.2;
}
.stat-strip {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.stat-item {
padding: 13px 10px !important;
font-size: 12px !important;
text-align: left;
}
.occasion-row,
.product-row,
.listing-grid,
.banner-row,
.mini-grid,
.tile-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.section {
padding: 18px 0 !important;
}
.section-head h2 {
font-size: 24px !important;
}
.product-card h4 {
min-height: auto;
font-size: 14px;
}
}
@media (max-width: 430px) {
.topbar {
font-size: 11px;
}
.topbar-left {
gap: 6px;
overflow: auto;
justify-content: flex-start;
width: 100%;
}
.logo-mark {
width: 34px;
height: 34px;
border-radius: 10px;
}
.logo span:last-child {
font-size: 18px;
}
.header-actions .icon-btn {
font-size: 19px;
padding: 4px;
}
.location-trigger {
max-width: 112px;
}
.search input {
font-size: 14px;
padding: 12px 10px;
}
.search button {
width: 42px;
height: 42px;
}
.hero-card-image {
padding: 14px !important;
border-radius: 22px !important;
}
.hero-image-side {
height: 210px !important;
min-height: 210px !important;
}
.hero-banner-photo {
height: 210px !important;
min-height: 210px !important;
}
.hero-copy-image h1 {
font-size: 33px !important;
}
.cta-row {
grid-template-columns: 1fr !important;
}
.why-grid-compact {
grid-template-columns: 1fr !important;
}
.side-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.stat-strip,
.occasion-row,
.product-row,
.listing-grid,
.banner-row,
.mini-grid,
.tile-grid {
grid-template-columns: 1fr !important;
}
.footer-main-grid {
grid-template-columns: 1fr !important;
}
}
/* === Final SEO + BuyAnyFlowers-style hero refinement === */
.hero-grid-refined {
grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.62fr) !important;
gap: 20px !important;
align-items: start !important;
}
.hero-card-image {
min-height: auto !important;
padding: 22px !important;
grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.95fr) !important;
align-items: center !important;
overflow: hidden !important;
}
.hero-card-image:before,
.hero-card-image:after {
display: none !important;
}
.hero-copy-image {
position: relative;
z-index: 3;
padding: 18px 0 18px 8px !important;
}
.hero-copy-image h1 {
max-width: 560px;
font-size: clamp(38px, 4.2vw, 64px) !important;
line-height: 1.02 !important;
letter-spacing: -0.055em !important;
}
.hero-copy-image p {
max-width: 520px;
font-size: 16px !important;
line-height: 1.65 !important;
}
.hero-image-side {
aspect-ratio: 16/9 !important;
min-height: 0 !important;
height: auto !important;
border-radius: 28px !important;
overflow: hidden !important;
box-shadow: 0 24px 54px rgba(97, 42, 88, 0.14) !important;
background: #fff !important;
}
.hero-image-side:before {
left: 18px !important;
top: 16px !important;
padding: 9px 15px !important;
font-size: 11px !important;
letter-spacing: 0.13em !important;
content: "Fresh flowers" !important;
}
.hero-banner-photo {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
aspect-ratio: 16/9 !important;
object-fit: cover !important;
object-position: center !important;
transform: none !important;
filter: saturate(1.04) contrast(1.02) !important;
}
.why-panel-compact {
padding: 22px !important;
}
.side-category-panel {
margin-top: 18px !important;
}
.side-category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.side-category-card {
min-height: 94px !important;
padding: 10px 8px !important;
}
.side-category-icon {
font-size: 30px !important;
}
.stat-strip {
margin-top: 14px !important;
}
@media (max-width: 1180px) {
.hero-grid-refined {
grid-template-columns: 1fr !important;
}
.hero-card-image {
grid-template-columns: minmax(0, 0.85fr) minmax(300px, 0.9fr) !important;
}
.hero-image-side {
max-width: 560px;
justify-self: end;
}
}
@media (max-width: 760px) {
.container {
width: min(100% - 22px, var(--container)) !important;
}
.page-pad {
padding: 10px 0 24px !important;
}
.hero-card-image {
display: flex !important;
flex-direction: column !important;
padding: 14px !important;
border-radius: 22px !important;
}
.hero-image-side {
order: 1 !important;
width: 100% !important;
max-width: none !important;
aspect-ratio: 16/9 !important;
border-radius: 18px !important;
margin: 0 0 16px !important;
}
.hero-copy-image {
order: 2 !important;
padding: 0 !important;
width: 100% !important;
}
.hero-copy-image h1 {
font-size: clamp(31px, 9vw, 42px) !important;
line-height: 1.04 !important;
margin: 14px 0 10px !important;
}
.hero-copy-image p {
font-size: 14.5px !important;
line-height: 1.55 !important;
}
.badge-pill {
font-size: 10px !important;
padding: 8px 12px !important;
letter-spacing: 0.12em !important;
}
.cta-row {
grid-template-columns: 1fr 1fr !important;
display: grid !important;
gap: 10px !important;
width: 100%;
}
.side-category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.side-category-card {
min-height: 86px !important;
}
.why-panel-compact {
padding: 16px !important;
border-radius: 22px !important;
}
}
@media (max-width: 430px) {
.hero-card-image {
padding: 12px !important;
}
.hero-copy-image h1 {
font-size: 30px !important;
}
.cta-row {
grid-template-columns: 1fr !important;
}
.side-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* =========================================================
PREMIUM LEVEL HERO + RESPONSIVE STORE FRONT OVERRIDES
Compact 16:9 hero stage, elegant BuyAnyFlowers-style image,
stronger mobile behaviour, and less above-the-fold takeover.
========================================================= */
:root {
--premium-shadow: 0 22px 55px rgba(96, 42, 88, 0.1);
--premium-soft-shadow: 0 14px 34px rgba(246, 39, 128, 0.09);
--premium-line: rgba(239, 215, 228, 0.92);
}
.page-pad {
padding-top: 16px !important;
}
.hero-grid-refined {
display: grid !important;
grid-template-columns: minmax(0, 1.38fr) minmax(310px, 0.62fr) !important;
gap: 18px !important;
align-items: stretch !important;
min-height: 0 !important;
}
.hero-card-image,
.why-panel-compact {
height: clamp(330px, 34vw, 405px) !important;
min-height: 0 !important;
border-radius: 24px !important;
box-shadow: var(--premium-shadow) !important;
}
.hero-card-image {
padding: 22px 24px !important;
display: grid !important;
grid-template-columns: minmax(0, 0.88fr) minmax(280px, 0.88fr) !important;
gap: 18px !important;
align-items: center !important;
background:
radial-gradient(
circle at 78% 28%,
rgba(255, 255, 255, 0.92) 0 14%,
transparent 42%
),
radial-gradient(
circle at 86% 88%,
rgba(235, 77, 151, 0.22),
transparent 34%
),
linear-gradient(135deg, #fff 0%, #fff8fc 54%, #f8e5ef 100%) !important;
overflow: hidden !important;
border: 1px solid var(--premium-line) !important;
}
.hero-card-image:before,
.hero-card-image:after {
display: none !important;
}
.hero-copy-image {
padding: 0 !important;
max-width: 410px;
position: relative;
z-index: 2;
}
.hero-copy-image .badge-pill {
padding: 8px 14px !important;
font-size: 10.5px !important;
letter-spacing: 0.17em !important;
background: rgba(255, 255, 255, 0.76) !important;
box-shadow: 0 10px 24px rgba(235, 77, 151, 0.1) !important;
}
.hero-copy-image h1 {
font-size: clamp(36px, 4.2vw, 56px) !important;
line-height: 0.98 !important;
letter-spacing: -0.055em !important;
margin: 18px 0 14px !important;
}
.hero-copy-image p {
font-size: 15px !important;
line-height: 1.58 !important;
max-width: 385px !important;
color: #696176 !important;
margin: 0 !important;
}
.hero-card-image .cta-row {
margin-top: 22px !important;
gap: 10px !important;
}
.hero-card-image .btn {
padding: 13px 18px !important;
border-radius: 13px !important;
box-shadow: none;
}
.hero-card-image .btn-primary {
box-shadow: 0 14px 28px rgba(181, 65, 148, 0.2) !important;
}
.hero-image-side {
position: relative !important;
z-index: 1 !important;
width: 100% !important;
aspect-ratio: 16/9 !important;
min-height: 0 !important;
height: auto !important;
max-height: 250px !important;
border-radius: 22px !important;
overflow: hidden !important;
align-self: center !important;
background: linear-gradient(145deg, #eef4f6, #f9e3ef) !important;
box-shadow: 0 22px 44px rgba(246, 39, 128, 0.13) !important;
border: 1px solid rgba(255, 255, 255, 0.78) !important;
}
.hero-image-side:before {
content: "Fresh flowers" !important;
position: absolute !important;
left: 18px !important;
top: 16px !important;
z-index: 3 !important;
background: rgba(255, 255, 255, 0.9) !important;
color: var(--brand) !important;
border-radius: 999px !important;
padding: 9px 15px !important;
font-weight: 900 !important;
font-size: 10px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
box-shadow: 0 10px 22px rgba(246, 39, 128, 0.12) !important;
}
.hero-image-side:after {
display: none !important;
}
.hero-banner-photo {
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
object-fit: cover !important;
object-position: center 52% !important;
filter: saturate(1.04) contrast(1.02) !important;
transform: scale(1.015);
}
.why-panel-compact {
display: flex !important;
flex-direction: column !important;
padding: 18px !important;
gap: 10px !important;
overflow: hidden !important;
background: rgba(255, 255, 255, 0.96) !important;
border: 1px solid var(--premium-line) !important;
}
.why-head {
margin: 0 !important;
}
.why-head .eyebrow {
font-size: 12px !important;
letter-spacing: 0.17em !important;
}
.why-head h2 {
font-size: 25px !important;
line-height: 1.08 !important;
margin: 6px 0 0 !important;
}
.why-grid-compact {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 9px !important;
}
.why-mini {
padding: 11px 12px !important;
border-radius: 14px !important;
min-height: 52px !important;
box-shadow: none !important;
}
.why-mini strong {
font-size: 13px !important;
line-height: 1.1 !important;
}
.why-mini small {
font-size: 11px !important;
}
.ai-mini-banner {
margin: 2px 0 0 !important;
padding: 11px 12px !important;
border-radius: 17px !important;
min-height: 58px !important;
}
.ai-mini-banner strong {
font-size: 14px !important;
}
.ai-mini-banner small {
font-size: 11px !important;
}
.ai-mini-banner .btn {
min-width: 54px !important;
padding: 10px 14px !important;
border-radius: 13px !important;
}
.side-category-panel {
margin-top: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
}
.side-category-head {
margin-bottom: 8px !important;
}
.side-category-head h2 {
font-size: 19px !important;
}
.side-category-head a {
font-size: 13px !important;
}
.side-category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.side-category-card {
min-height: 74px !important;
padding: 8px 6px !important;
border-radius: 15px !important;
background: linear-gradient(145deg, #fff, #fff8fc) !important;
box-shadow: none !important;
}
.side-category-card:hover {
box-shadow: var(--premium-soft-shadow) !important;
transform: translateY(-2px) !important;
}
.side-category-icon {
font-size: 24px !important;
}
.side-category-card strong {
font-size: 11px !important;
line-height: 1.12 !important;
}
.stat-strip {
margin-top: 14px !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
}
.stat-item {
padding: 13px 16px !important;
border-radius: 17px !important;
box-shadow: var(--premium-soft-shadow) !important;
}
.section {
padding: 20px 0 !important;
}
@media (max-width: 1180px) {
.hero-grid-refined {
grid-template-columns: 1fr !important;
}
.hero-card-image,
.why-panel-compact {
height: auto !important;
}
.hero-card-image {
grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.82fr) !important;
}
.why-panel-compact {
overflow: visible !important;
}
.side-category-grid {
grid-template-columns: repeat(6, minmax(112px, 1fr)) !important;
overflow: auto !important;
padding-bottom: 4px;
scroll-snap-type: x mandatory;
}
.side-category-card {
scroll-snap-align: start !important;
}
}
@media (max-width: 760px) {
body {
background: #fff8fc !important;
}
.container {
width: min(100% - 22px, var(--container)) !important;
}
.page-pad {
padding: 10px 0 24px !important;
}
.hero-grid-refined {
gap: 12px !important;
}
.hero-card-image {
display: flex !important;
flex-direction: column !important;
padding: 14px !important;
border-radius: 22px !important;
gap: 14px !important;
}
.hero-image-side {
order: 1 !important;
max-height: none !important;
width: 100% !important;
aspect-ratio: 16/9 !important;
margin: 0 !important;
border-radius: 18px !important;
}
.hero-copy-image {
order: 2 !important;
max-width: none !important;
width: 100% !important;
}
.hero-copy-image .badge-pill {
font-size: 9.5px !important;
padding: 7px 11px !important;
}
.hero-copy-image h1 {
font-size: clamp(30px, 9vw, 42px) !important;
line-height: 1.02 !important;
margin: 12px 0 10px !important;
}
.hero-copy-image p {
font-size: 14px !important;
line-height: 1.5 !important;
}
.hero-card-image .cta-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
margin-top: 16px !important;
width: 100%;
}
.hero-card-image .btn {
padding: 12px 10px !important;
font-size: 14px !important;
}
.why-panel-compact {
padding: 15px !important;
border-radius: 22px !important;
gap: 10px !important;
}
.why-head h2 {
font-size: 23px !important;
}
.why-grid-compact {
grid-template-columns: 1fr 1fr !important;
}
.side-category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
overflow: visible !important;
}
.side-category-card {
min-height: 82px !important;
}
.stat-strip {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
.stat-item {
padding: 12px !important;
font-size: 12px !important;
text-align: left !important;
}
}
@media (max-width: 430px) {
.hero-card-image {
padding: 12px !important;
}
.hero-image-side:before {
left: 12px !important;
top: 12px !important;
padding: 7px 10px !important;
font-size: 9px !important;
}
.hero-copy-image h1 {
font-size: 30px !important;
}
.hero-card-image .cta-row {
grid-template-columns: 1fr !important;
}
.why-grid-compact,
.stat-strip {
grid-template-columns: 1fr !important;
}
.side-category-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* ==========================================================
Ultra Premium Motion Upgrade: cinematic but lightweight
========================================================== */
:root {
--premium-ease: cubic-bezier(0.2, 0.85, 0.22, 1);
--premium-glow:
0 26px 70px rgba(235, 77, 151, 0.22), 0 10px 34px rgba(87, 42, 114, 0.14);
--gold: #d8ad61;
}
@keyframes premiumFadeLift {
from {
opacity: 0;
transform: translateY(24px) scale(0.985);
filter: blur(8px);
}
to {
opacity: 1;
transform: none;
filter: none;
}
}
@keyframes premiumFloat {
0%,
100% {
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(0, -12px, 0);
}
}
@keyframes premiumShimmer {
0% {
transform: translateX(-120%) skewX(-18deg);
}
100% {
transform: translateX(160%) skewX(-18deg);
}
}
@keyframes premiumPulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(235, 77, 151, 0.22);
}
50% {
box-shadow: 0 0 0 12px rgba(235, 77, 151, 0);
}
}
@keyframes heroImageSwap {
0% {
opacity: 0.35;
transform: scale(1.06) translateY(12px);
filter: blur(10px);
}
100% {
opacity: 1;
transform: scale(1);
filter: none;
}
}
body:before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(
circle at 12% 16%,
rgba(235, 77, 151, 0.1),
transparent 30%
),
radial-gradient(
circle at 82% 5%,
rgba(216, 173, 97, 0.12),
transparent 28%
),
radial-gradient(circle at 70% 88%, rgba(87, 42, 114, 0.1), transparent 34%);
}
.header-main {
transition:
box-shadow 0.35s var(--premium-ease),
transform 0.35s var(--premium-ease),
background 0.35s var(--premium-ease);
}
.header-main.is-scrolled {
box-shadow: 0 14px 40px rgba(79, 40, 74, 0.12);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(18px);
}
.logo-mark {
animation: premiumPulse 4.2s ease-in-out infinite;
}
.logo:hover .logo-mark {
transform: rotate(-7deg) scale(1.08);
}
.navbar a,
.icon-btn,
.side-category-card,
.btn,
.quick-add {
transition:
transform 0.28s var(--premium-ease),
box-shadow 0.28s var(--premium-ease),
background 0.28s var(--premium-ease),
color 0.28s var(--premium-ease),
border-color 0.28s var(--premium-ease);
}
.navbar a:hover,
.icon-btn:hover {
transform: translateY(-2px);
color: var(--brand);
}
.btn-primary,
.quick-add {
position: relative;
overflow: hidden;
box-shadow: 0 14px 30px rgba(235, 77, 151, 0.2);
}
.btn-primary:after,
.quick-add:after {
content: "";
position: absolute;
top: -40%;
bottom: -40%;
left: 0;
width: 48%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.42),
transparent
);
transform: translateX(-130%) skewX(-18deg);
}
.btn-primary:hover:after,
.quick-add:hover:after {
animation: premiumShimmer 0.9s var(--premium-ease);
}
.btn:hover,
.quick-add:hover {
transform: translateY(-4px);
box-shadow: var(--premium-glow);
}
.hero-card-image {
isolation: isolate;
box-shadow:
0 30px 90px rgba(87, 42, 114, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.82);
animation: premiumFadeLift 0.8s var(--premium-ease) both;
overflow: hidden;
}
.hero-card-image:after {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.48),
transparent
);
transform: translateX(-120%) skewX(-14deg);
pointer-events: none;
z-index: 3;
}
.hero-card-image:hover:after {
animation: premiumShimmer 1.25s var(--premium-ease);
}
.hero-copy-image {
position: relative;
z-index: 4;
}
.hero-copy-image h1,
.section-head h2 {
letter-spacing: -0.04em;
}
.hero-copy-image h1 {
background: linear-gradient(95deg, #1f2030 0%, #5a1a93 55%, #f62780 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-image-side {
transform-style: preserve-3d;
transition:
transform 0.55s var(--premium-ease),
box-shadow 0.55s var(--premium-ease);
}
.hero-card-image:hover .hero-image-side {
transform: perspective(900px) rotateY(-3deg) rotateX(2deg) translateY(-4px);
box-shadow: 0 38px 100px rgba(87, 42, 114, 0.26);
}
.hero-banner-photo {
animation: heroImageSwap 0.65s var(--premium-ease) both;
transition:
transform 0.9s var(--premium-ease),
filter 0.45s ease;
object-fit: cover;
}
.hero-image-side:hover .hero-banner-photo {
transform: scale(1.075);
}
.hero-swatcher {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-top: 22px;
}
.hero-swatch {
height: 42px;
border: 1px solid rgba(235, 77, 151, 0.2);
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(14px);
border-radius: 999px;
padding: 6px 14px 6px 8px;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 900;
color: #3d3444;
box-shadow: 0 10px 24px rgba(87, 42, 114, 0.08);
transition: all 0.28s var(--premium-ease);
}
.hero-swatch:before {
content: "";
width: 22px;
height: 22px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #fff, var(--swatch));
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.hero-swatch:hover,
.hero-swatch.active {
transform: translateY(-3px);
border-color: rgba(235, 77, 151, 0.5);
box-shadow: 0 16px 35px rgba(87, 42, 114, 0.16);
}
.hero-swatch.active {
background: #fff;
color: var(--brand);
}
.product-card,
.occasion-card,
.category-card,
.mini-card,
.banner,
.why-mini,
.side-category-card,
.addon-card,
.plan-card {
will-change: transform;
transform-style: preserve-3d;
}
.product-card:hover,
.occasion-card:hover,
.category-card:hover,
.mini-card:hover,
.banner:hover,
.why-mini:hover,
.side-category-card:hover,
.addon-card:hover,
.plan-card:hover {
transform: translateY(-8px) scale(1.012);
box-shadow: 0 24px 70px rgba(87, 42, 114, 0.16);
border-color: rgba(235, 77, 151, 0.38);
}
.product-thumb,
.thumb,
.visual-wrap,
.hero-image-side {
position: relative;
overflow: hidden;
}
.product-thumb:before,
.visual-wrap:before,
.hero-image-side:before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at var(--mx, 50%) var(--my, 50%),
rgba(255, 255, 255, 0.38),
transparent 34%
);
opacity: 0;
transition: opacity 0.35s var(--premium-ease);
z-index: 2;
pointer-events: none;
}
.product-card:hover .product-thumb:before,
.visual-wrap:hover:before,
.hero-image-side:hover:before {
opacity: 1;
}
.photo-fit,
.realistic-product-photo,
.main-product-photo,
.gallery-photo,
.hero-banner-photo {
transition:
transform 0.75s var(--premium-ease),
filter 0.45s ease;
}
.product-card:hover .photo-fit,
.addon-card:hover .photo-fit {
transform: scale(1.12) rotate(0.6deg);
filter: saturate(1.08) contrast(1.03);
}
.reveal-on-scroll {
opacity: 0;
transform: translateY(24px) scale(0.985);
filter: blur(7px);
}
.reveal-on-scroll.is-visible {
animation: premiumFadeLift 0.7s var(--premium-ease) both;
}
.reveal-on-scroll:nth-child(2n) {
animation-delay: 0.05s;
}
.reveal-on-scroll:nth-child(3n) {
animation-delay: 0.1s;
}
.image-visual-wrap {
cursor: zoom-in;
}
.image-visual-wrap.is-zooming .main-product-photo {
transform: scale(2.05);
transform-origin: var(--zoom-x, 50%) var(--zoom-y, 50%);
}
.image-visual-wrap:after {
content: "🔍 Move to zoom • Click for full view";
position: absolute;
left: 14px;
bottom: 14px;
z-index: 4;
background: rgba(255, 255, 255, 0.86);
backdrop-filter: blur(10px);
border: 1px solid rgba(235, 77, 151, 0.18);
border-radius: 999px;
padding: 8px 12px;
font-size: 12px;
font-weight: 800;
color: #7b3e74;
box-shadow: 0 10px 28px rgba(87, 42, 114, 0.12);
}
.zoom-lightbox {
position: fixed;
inset: 0;
background: rgba(20, 14, 25, 0.76);
backdrop-filter: blur(16px);
z-index: 999;
display: grid;
place-items: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s var(--premium-ease);
}
.zoom-lightbox.open {
opacity: 1;
pointer-events: auto;
}
.zoom-lightbox-inner {
position: relative;
width: min(980px, 94vw);
max-height: 88vh;
background: #fff;
border-radius: 30px;
padding: 16px;
box-shadow: 0 40px 120px rgba(0, 0, 0, 0.38);
transform: scale(0.94);
transition: transform 0.28s var(--premium-ease);
}
.zoom-lightbox.open .zoom-lightbox-inner {
transform: scale(1);
}
.zoom-lightbox img {
width: 100%;
max-height: 78vh;
object-fit: contain;
border-radius: 22px;
}
.zoom-close {
position: absolute;
right: 18px;
top: 18px;
width: 42px;
height: 42px;
border: 0;
border-radius: 50%;
background: #fff;
color: #7b3e74;
font-size: 26px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.magnetic-btn {
transform: translate(var(--mag-x, 0), var(--mag-y, 0));
}
.premium-sparkle {
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
background: radial-gradient(circle, #fff, var(--brand));
pointer-events: none;
z-index: 10;
animation: sparklePop 0.65s ease forwards;
}
@keyframes sparklePop {
from {
opacity: 1;
transform: translate(-50%, -50%) scale(0.4);
}
to {
opacity: 0;
transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy)))
scale(1.4);
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
.image-visual-wrap.is-zooming .main-product-photo {
transform: none;
}
}
@media (max-width: 760px) {
.hero-swatcher {
gap: 8px;
}
.hero-swatch {
height: 38px;
padding-right: 10px;
font-size: 12px;
}
.image-visual-wrap:after {
content: "Tap to zoom";
}
}
/* =========================================================
Ultra Premium Motion + SEO UX Layer v2
Rich motion, scroll reveals, hero depth, premium commerce polish
========================================================= */
:root {
--lux-ease: cubic-bezier(0.18, 0.82, 0.22, 1);
--lux-shadow: 0 28px 80px rgba(87, 42, 114, 0.18);
--lux-glow:
0 0 0 1px rgba(255, 255, 255, 0.45), 0 24px 70px rgba(235, 77, 151, 0.18);
}
html {
scroll-behavior: smooth;
scroll-padding-top: 120px;
}
body:before {
content: "";
position: fixed;
inset: -20%;
pointer-events: none;
z-index: -1;
background:
radial-gradient(
circle at var(--mouse-x, 50%) var(--mouse-y, 20%),
rgba(235, 77, 151, 0.13),
transparent 28%
),
radial-gradient(circle at 80% 10%, rgba(87, 42, 114, 0.09), transparent 22%);
transition: background-position 0.25s linear;
}
.header-main {
animation: luxHeaderDrop 0.72s var(--lux-ease) both;
backdrop-filter: saturate(1.2) blur(18px);
}
@keyframes luxHeaderDrop {
from {
transform: translateY(-28px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.logo-mark {
animation: logoBreath 4.6s ease-in-out infinite;
}
.logo:hover .logo-mark {
animation: logoSpin 0.9s var(--lux-ease) both;
}
@keyframes logoBreath {
50% {
filter: saturate(1.3) brightness(1.05);
box-shadow:
0 0 0 8px rgba(235, 77, 151, 0.08),
inset 0 0 0 4px rgba(255, 255, 255, 0.72);
}
}
@keyframes logoSpin {
to {
transform: rotate(1turn) scale(1.05);
}
}
.hero-card {
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero-card:before {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(
120deg,
transparent 10%,
rgba(255, 255, 255, 0.66) 24%,
transparent 38%
);
transform: translateX(-120%);
animation: premiumSweep 5.8s ease-in-out infinite;
z-index: 1;
pointer-events: none;
}
.hero-card > * {
position: relative;
z-index: 2;
}
@keyframes premiumSweep {
0%,
55% {
transform: translateX(-120%);
}
75%,
100% {
transform: translateX(120%);
}
}
.hero-copy h1,
.hero-copy p,
.badge-pill,
.cta-row,
.hero-swatcher {
opacity: 0;
animation: copyLift 0.82s var(--lux-ease) both;
}
.hero-copy h1 {
animation-delay: 0.05s;
}
.hero-copy p {
animation-delay: 0.16s;
}
.cta-row {
animation-delay: 0.27s;
}
.hero-swatcher {
animation-delay: 0.36s;
}
@keyframes copyLift {
from {
opacity: 0;
transform: translateY(24px) scale(0.985);
filter: blur(8px);
}
to {
opacity: 1;
transform: none;
filter: none;
}
}
.hero-image-side {
perspective: 1200px;
transform-style: preserve-3d;
}
.hero-banner-photo {
will-change: transform, filter;
transition:
transform 0.65s var(--lux-ease),
filter 0.65s var(--lux-ease),
box-shadow 0.65s var(--lux-ease);
box-shadow: var(--lux-shadow);
}
.hero-image-side:hover .hero-banner-photo {
transform: translateY(-8px) rotateX(var(--tilt-y, 0deg))
rotateY(var(--tilt-x, 0deg)) scale(1.035);
filter: saturate(1.12) contrast(1.04);
}
.hero-swatch {
position: relative;
overflow: hidden;
}
.hero-swatch:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
transparent,
rgba(255, 255, 255, 0.62),
transparent
);
transform: translateX(-120%);
transition: transform 0.7s var(--lux-ease);
}
.hero-swatch:hover:after,
.hero-swatch.active:after {
transform: translateX(120%);
}
.btn,
.icon-btn,
.nav-pill,
.search button,
[data-addon-open],
.addon-option {
position: relative;
overflow: hidden;
}
.btn:before,
.icon-btn:before,
.search button:before,
[data-addon-open]:before,
.addon-option:before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at var(--btn-x, 50%) var(--btn-y, 50%),
rgba(255, 255, 255, 0.5),
transparent 26%
);
opacity: 0;
transition: opacity 0.28s ease;
pointer-events: none;
}
.btn:hover:before,
.icon-btn:hover:before,
.search button:hover:before,
[data-addon-open]:hover:before,
.addon-option:hover:before {
opacity: 1;
}
.btn:hover,
.addon-option:hover,
.icon-btn:hover {
transform: translateY(-2px);
}
.btn,
.addon-option,
.icon-btn {
transition:
transform 0.28s var(--lux-ease),
box-shadow 0.28s var(--lux-ease),
border-color 0.28s var(--lux-ease);
}
.btn-primary:hover {
box-shadow: 0 20px 44px rgba(235, 77, 151, 0.28);
}
.product-card,
.category-card,
.occasion-card,
.mini-card,
.banner,
.panel,
.card,
.soft-panel,
.checkout-card,
.summary-card,
.feature-card,
.form-card,
.status-card {
transition:
transform 0.38s var(--lux-ease),
box-shadow 0.38s var(--lux-ease),
border-color 0.38s var(--lux-ease);
will-change: transform;
}
.product-card:hover,
.category-card:hover,
.occasion-card:hover,
.mini-card:hover,
.banner:hover,
.feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--lux-glow);
border-color: rgba(235, 77, 151, 0.28);
}
.product-thumb,
.thumb-wrap,
.visual-wrap,
.summary-item .thumb,
.addon-card .product-thumb {
position: relative;
overflow: hidden;
}
.product-thumb img,
.thumb-wrap img,
.visual-wrap img,
.summary-item img,
.addon-card img {
transition:
transform 0.85s var(--lux-ease),
filter 0.55s var(--lux-ease);
will-change: transform;
}
.product-card:hover .product-thumb img,
.category-card:hover img,
.addon-card:hover img,
.banner:hover img {
transform: scale(1.1);
filter: saturate(1.12);
}
.product-thumb:after,
.thumb-wrap:after,
.visual-wrap:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
110deg,
transparent 20%,
rgba(255, 255, 255, 0.45),
transparent 80%
);
transform: translateX(-120%);
transition: transform 0.9s var(--lux-ease);
pointer-events: none;
}
.product-card:hover .product-thumb:after,
.thumb-wrap:hover:after,
.visual-wrap:hover:after {
transform: translateX(120%);
}
[data-reveal] {
opacity: 0;
transform: translateY(34px) scale(0.985);
filter: blur(10px);
transition:
opacity 0.85s var(--lux-ease),
transform 0.85s var(--lux-ease),
filter 0.85s var(--lux-ease);
transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].revealed {
opacity: 1;
transform: none;
filter: none;
}
.reveal-stagger > * {
transition-delay: calc(var(--stagger-index, 0) * 55ms);
}
.luxury-float {
animation: luxFloat 5s ease-in-out infinite;
}
.luxury-float:nth-child(2n) {
animation-delay: 0.8s;
}
.luxury-float:nth-child(3n) {
animation-delay: 1.4s;
}
@keyframes luxFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.zoom-lens {
position: absolute;
width: 160px;
height: 160px;
border-radius: 50%;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) scale(0.82);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow:
0 18px 55px rgba(0, 0, 0, 0.2),
inset 0 0 0 1px rgba(235, 77, 151, 0.2);
background-repeat: no-repeat;
background-size: 260%;
z-index: 6;
transition:
opacity 0.18s ease,
transform 0.18s var(--lux-ease);
}
.zoom-host:hover .zoom-lens {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.lightbox-caption {
font-weight: 800;
color: #403246;
text-align: center;
padding: 10px 0 2px;
}
.zoom-lightbox-inner {
animation: lightboxBloom 0.28s var(--lux-ease) both;
}
@keyframes lightboxBloom {
from {
opacity: 0;
transform: scale(0.92) translateY(20px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.seo-rich-section {
background: linear-gradient(135deg, #fff, #fbf5fb);
border: 1px solid var(--line);
border-radius: 28px;
box-shadow: var(--shadow);
padding: 28px;
margin-top: 26px;
}
.seo-rich-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 24px;
align-items: start;
}
.seo-rich-section h2 {
margin: 0 0 10px;
font-size: 28px;
}
.seo-rich-section p {
color: var(--muted);
line-height: 1.75;
}
.seo-key-pills {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
.seo-key-pills span {
border: 1px solid #f0c7db;
background: #fff;
border-radius: 999px;
padding: 9px 13px;
font-size: 13px;
font-weight: 800;
color: #5a1a93;
}
.faq-mini {
display: grid;
gap: 10px;
}
.faq-mini details {
background: #fff;
border: 1px solid var(--line);
border-radius: 16px;
padding: 14px;
}
.faq-mini summary {
font-weight: 900;
cursor: pointer;
}
.faq-mini p {
margin: 8px 0 0;
font-size: 14px;
}
.toast,
.cart-toast {
animation: toastRise 0.36s var(--lux-ease) both;
}
@keyframes toastRise {
from {
transform: translateY(18px) scale(0.94);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
.zoom-lens {
display: none;
}
}
@media (max-width: 780px) {
.seo-rich-grid {
grid-template-columns: 1fr;
}
.zoom-lens {
display: none;
}
.hero-card:before {
display: none;
}
}
/* Ultra premium blog, breathing zoom, price pulse and product magnifier */
.premium-blog-section {
padding: 48px 0 36px;
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 18% 20%,
rgba(235, 77, 151, 0.1),
transparent 28%
),
radial-gradient(
circle at 86% 18%,
rgba(155, 74, 143, 0.12),
transparent 24%
),
linear-gradient(
180deg,
rgba(255, 255, 255, 0.42),
rgba(251, 247, 249, 0.94)
);
}
.premium-blog-section:before {
content: "";
position: absolute;
inset: 10px 2%;
border: 1px solid rgba(235, 77, 151, 0.12);
border-radius: 34px;
pointer-events: none;
mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.blog-head {
align-items: center;
margin-bottom: 20px;
}
.blog-head h2 {
max-width: 820px;
}
.blog-head p {
max-width: 760px;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
position: relative;
z-index: 1;
}
.blog-card {
background: rgba(255, 255, 255, 0.84);
border: 1px solid rgba(235, 215, 228, 0.96);
border-radius: 26px;
box-shadow: 0 18px 50px rgba(79, 40, 74, 0.1);
overflow: hidden;
transform: translateY(18px);
opacity: 0;
transition:
transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s ease,
border-color 0.35s ease,
opacity 0.65s ease;
transition-delay: var(--delay, 0s);
}
.blog-card.in-view {
transform: translateY(0);
opacity: 1;
}
.blog-card:hover {
transform: translateY(-8px) scale(1.012);
box-shadow: 0 26px 70px rgba(79, 40, 74, 0.18);
border-color: rgba(235, 77, 151, 0.42);
}
.blog-image {
display: block;
position: relative;
aspect-ratio: 1.42/1;
overflow: hidden;
background: #fff;
}
.blog-image img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.02);
transition:
transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
filter 0.45s ease;
will-change: transform;
}
.blog-card:hover .blog-image img {
transform: scale(1.16);
filter: saturate(1.08) contrast(1.04);
}
.blog-image:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 52%, rgba(31, 32, 48, 0.48));
opacity: 0.85;
}
.blog-chip {
position: absolute;
left: 14px;
bottom: 14px;
z-index: 1;
padding: 8px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(12px);
font-size: 12px;
font-weight: 800;
color: #5a1a93;
box-shadow: 0 8px 24px rgba(31, 32, 48, 0.14);
}
.blog-copy {
padding: 18px;
}
.blog-date {
display: inline-flex;
color: var(--brand);
font-weight: 800;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.blog-copy h3 {
font-size: 20px;
line-height: 1.22;
margin: 8px 0 10px;
}
.blog-copy p {
font-size: 14px;
line-height: 1.62;
color: var(--muted);
margin: 0 0 14px;
}
.blog-read {
font-weight: 900;
color: #5a1a93;
display: inline-flex;
transform: translateX(0);
transition: transform 0.25s ease;
}
.blog-read:hover {
transform: translateX(6px);
}
.zoom-breathe img,
.product-thumb img,
.variant-photo,
.gallery-photo,
.main-product-photo {
animation: luxuryImageBreath 5.8s ease-in-out infinite;
transform-origin: center;
}
.product-card:hover .product-thumb img,
.gallery-thumb:hover img,
.variant-card:hover img {
animation-duration: 1.8s;
}
.price,
.amount,
.price-box .amount,
.variant-copy strong,
.product-card .price {
animation: luxuryPricePulse 3.4s ease-in-out infinite;
display: inline-block;
transform-origin: center;
color: inherit;
}
.product-card:hover .price,
.price-box:hover .amount,
.variant-card:hover strong {
animation-duration: 0.95s;
color: var(--brand);
}
@keyframes luxuryImageBreath {
0%,
100% {
transform: scale(1.015);
}
50% {
transform: scale(1.075);
}
}
@keyframes luxuryPricePulse {
0%,
100% {
transform: scale(1);
text-shadow: 0 0 0 rgba(235, 77, 151, 0);
}
50% {
transform: scale(1.07);
text-shadow: 0 8px 22px rgba(235, 77, 151, 0.18);
}
}
.magnifier-btn {
position: absolute;
right: 16px;
bottom: 16px;
z-index: 5;
border: 0;
border-radius: 999px;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(14px);
box-shadow: 0 14px 34px rgba(31, 32, 48, 0.18);
color: #5a1a93;
font-weight: 900;
display: inline-flex;
gap: 8px;
align-items: center;
transition:
transform 0.24s ease,
box-shadow 0.24s ease;
}
.magnifier-btn:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 20px 42px rgba(31, 32, 48, 0.22);
}
[data-gallery-main],
.visual-wrap,
.product-thumb,
.thumb-wrap {
position: relative;
}
.product-magnifier-lens {
position: absolute;
width: 150px;
height: 150px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.92);
box-shadow:
0 18px 60px rgba(31, 32, 48, 0.28),
inset 0 0 0 1px rgba(235, 77, 151, 0.22);
background-repeat: no-repeat;
background-color: #fff;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%) scale(0.86);
transition:
opacity 0.18s ease,
transform 0.18s ease;
z-index: 6;
}
.magnifier-active .product-magnifier-lens {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.magnifier-active {
cursor: zoom-in;
}
.magnifier-toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translateX(-50%) translateY(20px);
background: #1f2030;
color: #fff;
border-radius: 999px;
padding: 12px 18px;
z-index: 9999;
box-shadow: 0 16px 45px rgba(31, 32, 48, 0.28);
opacity: 0;
transition: 0.25s ease;
}
.magnifier-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.shimmer-card {
position: relative;
overflow: hidden;
}
.shimmer-card:after,
.blog-card:before {
content: "";
position: absolute;
inset: -60% auto -60% -40%;
width: 34%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.58),
transparent
);
transform: rotate(18deg) translateX(-150%);
transition: transform 0.9s ease;
pointer-events: none;
}
.shimmer-card:hover:after,
.blog-card:hover:before {
transform: rotate(18deg) translateX(520%);
}
@media (max-width: 900px) {
.blog-grid {
grid-template-columns: 1fr 1fr;
}
.premium-blog-section {
padding: 34px 0 26px;
}
}
@media (max-width: 640px) {
.blog-grid {
grid-template-columns: 1fr;
}
.blog-head {
display: block;
}
.blog-head .btn {
margin-top: 12px;
}
.magnifier-btn {
right: 12px;
bottom: 12px;
padding: 10px 12px;
}
.product-magnifier-lens {
width: 118px;
height: 118px;
}
}
@media (prefers-reduced-motion: reduce) {
.zoom-breathe img,
.price,
.amount,
.price-box .amount,
.variant-copy strong,
.product-card .price {
animation: none !important;
}
.blog-card {
transition: none !important;
opacity: 1;
transform: none;
}
.product-magnifier-lens {
transition: none;
}
}
/* WhatsApp Order Button - Ultra Premium Product CTA */
.premium-product-actions {
grid-template-columns: 0.78fr 1.22fr;
align-items: stretch;
}
.whatsapp-order-btn {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 58px;
padding: 10px 16px;
border-radius: 16px !important;
border: 1px solid rgba(37, 211, 102, 0.34);
color: #fff;
background:
radial-gradient(
circle at 18% 15%,
rgba(255, 255, 255, 0.42),
transparent 22%
),
linear-gradient(135deg, #25d366 0%, #128c7e 48%, #5a1a93 100%);
box-shadow:
0 18px 42px rgba(37, 211, 102, 0.24),
0 10px 26px rgba(246, 39, 128, 0.18);
gap: 11px;
justify-content: flex-start;
transform-style: preserve-3d;
}
.whatsapp-order-btn:before {
content: "";
position: absolute;
inset: -2px;
z-index: -1;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0.52),
transparent 26%,
rgba(255, 255, 255, 0.35) 52%,
transparent 76%
);
transform: translateX(-120%) skewX(-18deg);
}
.whatsapp-order-btn:after {
content: "";
position: absolute;
inset: auto 16px -12px 16px;
height: 22px;
border-radius: 999px;
background: rgba(37, 211, 102, 0.55);
filter: blur(18px);
z-index: -1;
}
.whatsapp-order-btn:hover {
transform: translateY(-5px) scale(1.018);
box-shadow:
0 26px 62px rgba(37, 211, 102, 0.34),
0 14px 34px rgba(246, 39, 128, 0.22);
}
.whatsapp-order-btn:hover:before {
animation: premiumShimmer 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.wa-icon {
width: 38px;
height: 38px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.22);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.34),
0 10px 24px rgba(0, 0, 0, 0.12);
font-size: 18px;
transform: rotate(-12deg);
}
.wa-copy {
display: grid;
line-height: 1.05;
text-align: left;
}
.wa-copy strong {
font-size: 15px;
letter-spacing: 0.01em;
}
.wa-copy em {
font-style: normal;
font-size: 11px;
font-weight: 800;
opacity: 0.86;
margin-top: 4px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.wa-glow {
position: absolute;
width: 112px;
height: 112px;
border-radius: 50%;
right: -38px;
top: -44px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.52),
transparent 62%
);
animation: waGlowDrift 4.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes waGlowDrift {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(-18px, 18px, 0) scale(1.18);
}
}
@media (max-width: 640px) {
.premium-product-actions {
grid-template-columns: 1fr;
}
.whatsapp-order-btn {
justify-content: center;
}
.wa-copy {
text-align: left;
}
}
@media (prefers-reduced-motion: reduce) {
.wa-glow {
animation: none;
}
.whatsapp-order-btn:hover:before {
animation: none;
}
}
/* Account Dashboard + Theme CTA polish */
.premium-product-actions {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.premium-product-actions .btn-secondary,
.whatsapp-order-btn,
.product-summary .btn-primary[href*="#addonDrawer"],
.product-summary .btn-secondary[href="checkout.html"] {
border-radius: 16px !important;
min-height: 58px;
border: 1px solid rgba(235, 77, 151, 0.28) !important;
color: #fff !important;
background:
radial-gradient(
circle at 18% 12%,
rgba(255, 255, 255, 0.42),
transparent 24%
),
linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 58%, #4f2a58 100%) !important;
box-shadow:
0 18px 42px rgba(246, 39, 128, 0.22),
0 8px 18px rgba(235, 77, 151, 0.18) !important;
transition:
transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s ease,
filter 0.35s ease;
}
.product-summary .btn-primary[href*="#addonDrawer"] {
width: 100%;
margin-top: 10px;
}
.product-summary .btn-secondary[href="checkout.html"]:hover,
.whatsapp-order-btn:hover,
.product-summary .btn-primary[href*="#addonDrawer"]:hover {
transform: translateY(-5px) scale(1.018);
filter: saturate(1.08);
box-shadow:
0 28px 64px rgba(246, 39, 128, 0.3),
0 14px 28px rgba(235, 77, 151, 0.24) !important;
}
.whatsapp-order-btn:after {
background: rgba(235, 77, 151, 0.46) !important;
}
.whatsapp-order-btn {
justify-content: center !important;
}
.wa-icon {
background: rgba(255, 255, 255, 0.22) !important;
}
.wa-copy em {
opacity: 0.9;
}
.wa-glow {
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.5),
transparent 62%
) !important;
}
.account-page {
padding: 24px 0 56px;
background: linear-gradient(180deg, #fff 0, #fbf7f9 22%, #f7eef4 100%);
}
.account-breadcrumb {
margin: 0 0 16px;
color: #6f6878;
}
.account-breadcrumb span {
color: var(--brand);
font-weight: 800;
}
.account-hero {
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 330px;
gap: 24px;
align-items: center;
padding: 28px;
border-radius: 28px;
border: 1px solid var(--line);
background: linear-gradient(135deg, #fff, #f7ecf5 52%, #f1e6ff);
box-shadow: 0 24px 70px rgba(86, 42, 114, 0.12);
margin-bottom: 22px;
}
.account-hero:before {
content: "";
position: absolute;
inset: -40% auto auto -10%;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(235, 77, 151, 0.18),
transparent 68%
);
animation: accountOrb 8s ease-in-out infinite;
}
.account-hero:after {
content: "";
position: absolute;
right: -90px;
bottom: -140px;
width: 360px;
height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(246, 39, 128, 0.2), transparent 66%);
animation: accountOrb 9s ease-in-out infinite reverse;
}
.account-hero > * {
position: relative;
z-index: 1;
}
@keyframes accountOrb {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(24px, -18px, 0) scale(1.12);
}
}
.account-hero h1 {
font-size: 44px;
margin: 8px 0 8px;
line-height: 1;
}
.account-hero p {
max-width: 660px;
color: var(--muted);
font-size: 16px;
}
.account-hero-wallet {
padding: 22px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(255, 255, 255, 0.76);
box-shadow:
inset 0 0 0 1px rgba(235, 77, 151, 0.08),
0 18px 42px rgba(86, 42, 114, 0.12);
display: grid;
gap: 6px;
}
.account-hero-wallet span {
font-weight: 800;
color: var(--brand-2);
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.12em;
}
.account-hero-wallet strong {
font-size: 34px;
color: #2a2636;
}
.account-hero-wallet small {
color: var(--muted);
}
.account-layout {
display: grid;
grid-template-columns: 288px 1fr;
gap: 22px;
align-items: start;
}
.account-sidebar {
position: sticky;
top: 128px;
background: #fff;
border: 1px solid var(--line);
border-radius: 22px;
overflow: hidden;
box-shadow: var(--shadow);
}
.account-user-card {
display: flex;
gap: 12px;
align-items: center;
padding: 18px;
background: linear-gradient(135deg, var(--brand-2), #6f2f75);
color: #fff;
}
.account-user-card small {
display: block;
opacity: 0.78;
margin-top: 2px;
}
.account-avatar {
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.58);
border-radius: 12px;
display: grid;
place-items: center;
font-size: 22px;
}
.account-sidebar a {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid #f0e8ef;
font-weight: 700;
color: #3d3748;
transition:
background 0.25s ease,
color 0.25s ease,
transform 0.25s ease;
}
.account-sidebar a:hover {
background: #fff3f8;
transform: translateX(4px);
}
.account-sidebar a.active {
background: #fbf1f7;
color: var(--brand-2);
box-shadow: inset 4px 0 0 var(--brand-2);
}
.account-content {
display: grid;
gap: 22px;
}
.account-grid-panel {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.account-tile {
position: relative;
overflow: hidden;
min-height: 142px;
padding: 26px 18px;
text-align: center;
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 12px 32px rgba(79, 40, 74, 0.06);
transition:
transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s ease,
border-color 0.35s ease;
}
.account-tile:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.7),
transparent
);
transform: translateX(-120%) skewX(-18deg);
}
.account-tile:hover {
transform: translateY(-8px) scale(1.018);
border-color: #efb9d1;
box-shadow: 0 26px 64px rgba(86, 42, 114, 0.13);
}
.account-tile:hover:before {
animation: premiumShimmer 1.2s ease;
}
.account-tile h3 {
margin: 10px 0 5px;
font-size: 19px;
}
.account-tile p {
margin: 0;
color: #5f5867;
font-size: 13px;
}
.tile-icon {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
margin: 0 auto;
border: 2px solid currentColor;
font-size: 21px;
}
.tile-icon.red {
color: #ef4b36;
}
.tile-icon.blue {
color: #1464ff;
}
.tile-icon.olive {
color: #7a7f2f;
}
.tile-icon.green {
color: #209b42;
}
.tile-icon.pink {
color: #d85deb;
}
.tile-icon.purple {
color: #6548ff;
}
.tile-icon.gold {
color: #c78200;
}
.tile-icon.orange {
color: #f7941d;
}
.account-panel {
background: #fff;
border: 1px solid var(--line);
border-radius: 20px;
padding: 24px;
box-shadow: 0 12px 36px rgba(79, 40, 74, 0.06);
scroll-margin-top: 150px;
}
.account-panel h2 {
margin: 0 0 18px;
font-size: 24px;
}
.account-section-head {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: center;
margin-bottom: 18px;
}
.account-section-head h2 {
margin: 0;
}
.order-card {
border: 1px solid #eadde7;
border-radius: 16px;
overflow: hidden;
}
.order-top {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px;
background: #f8f1f6;
}
.delivered-badge {
display: inline-flex;
padding: 8px 12px;
border-radius: 999px;
background: #159447;
color: #fff;
font-size: 12px;
font-weight: 900;
}
.order-tags {
display: flex;
gap: 12px;
flex-wrap: wrap;
padding: 14px 16px;
}
.order-tags span {
background: #fbf7f9;
border-radius: 7px;
padding: 8px 10px;
font-size: 12px;
}
.order-body {
display: grid;
grid-template-columns: 74px 1.2fr 1fr 1fr 180px;
gap: 18px;
padding: 16px;
align-items: start;
}
.order-body img {
width: 74px;
height: 74px;
object-fit: cover;
border-radius: 12px;
}
.order-body h3 {
margin: 0 0 6px;
font-size: 15px;
}
.order-body p {
margin: 5px 0;
color: #2f2a36;
font-size: 13px;
}
.order-actions {
display: grid;
gap: 10px;
}
.order-actions .btn {
text-transform: uppercase;
font-size: 13px;
padding: 11px 12px;
}
.profile-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 28px;
}
.profile-form-grid label {
font-size: 12px;
color: #777;
display: grid;
gap: 6px;
}
.profile-form-grid input {
border: 0;
border-bottom: 1px solid #ddd;
padding: 10px 0;
border-radius: 0;
outline: 0;
}
.radio-row {
display: flex;
gap: 18px;
color: #24202d;
font-size: 14px;
padding-top: 11px;
}
.account-save {
margin-top: 22px;
min-width: 220px;
}
.reminder-grid,
.address-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.reminder-card,
.address-card {
border: 1px solid #eadde7;
border-radius: 14px;
padding: 16px;
background: linear-gradient(180deg, #fff, #fffafc);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.reminder-card:hover,
.address-card:hover {
transform: translateY(-5px);
box-shadow: 0 18px 44px rgba(86, 42, 114, 0.11);
}
.reminder-card strong {
display: block;
font-size: 16px;
text-transform: uppercase;
}
.reminder-card span {
color: var(--brand-2);
font-weight: 800;
}
.reminder-card a {
display: block;
margin: 14px -16px -16px;
padding: 13px;
text-align: center;
border-top: 1px solid #eadde7;
color: var(--brand-2);
font-weight: 900;
text-transform: uppercase;
}
.address-card button {
margin: 10px 10px 0 0;
padding: 9px 18px;
border: 1px solid #b9aebb;
border-radius: 9px;
background: #fff;
}
.cash-box {
padding: 22px;
border-radius: 18px;
background: linear-gradient(135deg, #fff1f7, #f5e9ff);
border: 1px solid #eed1e0;
}
.cash-box span {
font-weight: 800;
color: var(--brand-2);
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.1em;
}
.cash-box strong {
display: block;
font-size: 36px;
margin: 5px 0;
}
.voucher-tabs {
display: flex;
justify-content: center;
margin: 8px 0 26px;
}
.voucher-tabs button {
border: 0;
padding: 14px 36px;
font-weight: 800;
}
.voucher-tabs button:first-child {
background: var(--brand-2);
color: #fff;
border-radius: 8px 0 0 8px;
}
.voucher-tabs button:last-child {
background: #f1eef2;
border-radius: 0 8px 8px 0;
}
.empty-note {
text-align: center;
color: #5e5868;
}
.notify-list {
display: grid;
gap: 16px;
max-width: 360px;
}
.notify-list label {
display: flex;
justify-content: space-between;
align-items: center;
font-weight: 700;
}
.notify-list input {
accent-color: var(--brand-2);
width: 42px;
height: 22px;
}
.otp-row {
display: flex;
gap: 14px;
margin: 25px 0;
}
.otp-row span {
width: 48px;
height: 2px;
background: #292631;
display: block;
}
@media (max-width: 1024px) {
.account-layout {
grid-template-columns: 1fr;
}
.account-sidebar {
position: relative;
top: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.account-user-card {
grid-column: 1/-1;
}
.account-grid-panel {
grid-template-columns: repeat(2, 1fr);
}
.order-body {
grid-template-columns: 74px 1fr 1fr;
}
.account-hero {
grid-template-columns: 1fr;
}
.reminder-grid,
.address-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 680px) {
.account-page {
padding-top: 14px;
}
.account-hero {
padding: 22px;
}
.account-hero h1 {
font-size: 34px;
}
.account-sidebar,
.account-grid-panel,
.profile-form-grid,
.reminder-grid,
.address-grid {
grid-template-columns: 1fr;
}
.order-body {
grid-template-columns: 1fr;
}
.order-body img {
width: 100%;
height: 180px;
}
.premium-product-actions {
grid-template-columns: 1fr;
}
.account-section-head {
align-items: flex-start;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
.account-hero:before,
.account-hero:after {
animation: none;
}
.account-tile,
.reminder-card,
.address-card,
.account-sidebar a {
transition: none;
}
.account-tile:hover,
.reminder-card:hover,
.address-card:hover {
transform: none;
}
}
/* v6 premium login, account detail pages and refined lightbox */
:root {
--gg-deep: #4f2a58;
--gg-plum: #5a1a93;
--gg-pink: #f62780;
--gg-blush: #fff3f8;
--gg-ink: #211529;
--gg-gold: #c99139;
--gg-olive: #7d8430;
}
.login-premium-page {
position: relative;
overflow: hidden;
padding: 56px 0 70px;
background:
radial-gradient(
circle at 14% 8%,
rgba(235, 77, 151, 0.16),
transparent 26%
),
radial-gradient(
circle at 84% 10%,
rgba(87, 42, 114, 0.16),
transparent 28%
),
linear-gradient(135deg, #fff 0%, #fbf5fb 45%, #f6eaf4 100%);
}
.login-orb {
position: absolute;
border-radius: 999px;
filter: blur(12px);
opacity: 0.55;
animation: floatOrb 8s ease-in-out infinite alternate;
}
.orb-one {
width: 220px;
height: 220px;
background: rgba(235, 77, 151, 0.22);
left: -70px;
top: 72px;
}
.orb-two {
width: 280px;
height: 280px;
background: rgba(87, 42, 114, 0.18);
right: -80px;
bottom: 30px;
animation-delay: 1.2s;
}
@keyframes floatOrb {
to {
transform: translate3d(28px, -24px, 0) scale(1.08);
}
}
.login-premium-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 32px;
align-items: center;
min-height: 620px;
}
.login-story h1 {
font-size: clamp(36px, 5vw, 64px);
line-height: 1.02;
margin: 18px 0 14px;
color: var(--gg-ink);
letter-spacing: -0.04em;
}
.login-story p {
font-size: 18px;
line-height: 1.7;
color: #6d6071;
max-width: 560px;
}
.login-benefit-grid {
display: grid;
gap: 14px;
margin-top: 28px;
}
.login-benefit-grid div {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(235, 77, 151, 0.14);
border-radius: 20px;
padding: 16px 18px;
box-shadow: 0 18px 50px rgba(87, 42, 114, 0.08);
backdrop-filter: blur(14px);
transition: 0.28s ease;
}
.login-benefit-grid div:hover {
transform: translateX(8px);
box-shadow: 0 26px 70px rgba(87, 42, 114, 0.14);
}
.login-benefit-grid strong {
display: block;
color: var(--gg-deep);
font-size: 16px;
}
.login-benefit-grid span {
display: block;
color: #7a6f7d;
margin-top: 4px;
}
.login-card-premium {
display: grid;
grid-template-columns: 0.9fr 1fr;
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(235, 77, 151, 0.16);
border-radius: 34px;
padding: 18px;
box-shadow: 0 34px 90px rgba(87, 42, 114, 0.16);
overflow: hidden;
position: relative;
}
.login-card-premium:before {
content: "";
position: absolute;
inset: -1px;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.7),
transparent
);
transform: translateX(-110%);
animation: loginShimmer 5.5s ease-in-out infinite;
}
@keyframes loginShimmer {
45%,
100% {
transform: translateX(110%);
}
}
.login-flower-frame {
min-height: 520px;
border-radius: 26px;
overflow: hidden;
position: relative;
background: var(--gg-blush);
}
.login-flower-frame img {
width: 100%;
height: 100%;
object-fit: cover;
animation: slowBloomZoom 9s ease-in-out infinite alternate;
}
.login-flower-frame:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 44%, rgba(87, 42, 114, 0.2));
}
@keyframes slowBloomZoom {
to {
transform: scale(1.08) rotate(0.6deg);
}
}
.login-form-panel {
position: relative;
z-index: 2;
padding: 42px 34px;
display: flex;
flex-direction: column;
justify-content: center;
}
.login-secure-chip {
width: max-content;
background: #f7ecf5;
border: 1px solid rgba(235, 77, 151, 0.22);
color: var(--gg-plum);
border-radius: 999px;
padding: 9px 13px;
font-weight: 900;
font-size: 12px;
box-shadow: 0 10px 24px rgba(235, 77, 151, 0.1);
}
.login-form-panel h2 {
font-size: 34px;
margin: 18px 0 8px;
letter-spacing: -0.03em;
}
.login-form-panel p {
color: #6e6575;
}
.premium-login-form {
display: grid;
gap: 16px;
margin-top: 20px;
}
.premium-login-form label {
display: grid;
gap: 8px;
color: #33283a;
font-weight: 800;
}
.premium-login-form input {
border: 1px solid #ead5e1;
border-radius: 16px;
padding: 15px 16px;
box-shadow: inset 0 0 0 999px #fff;
background: #fff;
}
.premium-login-form input:focus {
border-color: var(--gg-pink);
box-shadow: 0 0 0 4px rgba(235, 77, 151, 0.1);
}
.otp-preview {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
margin-top: 2px;
}
.otp-preview span {
height: 42px;
border-radius: 12px;
background: linear-gradient(180deg, #fff, #fbf2f9);
border: 1px dashed rgba(246, 39, 128, 0.28);
animation: otpPulse 1.8s ease-in-out infinite;
}
.otp-preview span:nth-child(2) {
animation-delay: 0.12s;
}
.otp-preview span:nth-child(3) {
animation-delay: 0.24s;
}
.otp-preview span:nth-child(4) {
animation-delay: 0.36s;
}
.otp-preview span:nth-child(5) {
animation-delay: 0.48s;
}
.otp-preview span:nth-child(6) {
animation-delay: 0.6s;
}
@keyframes otpPulse {
50% {
transform: translateY(-3px);
border-color: var(--gg-pink);
}
}
.login-terms {
font-size: 14px;
}
.login-terms a {
color: var(--gg-plum);
font-weight: 800;
}
.login-trust-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.login-trust-row span {
font-size: 12px;
font-weight: 800;
color: #5e5364;
background: #fff;
border: 1px solid #f0dce8;
border-radius: 999px;
padding: 8px 10px;
}
.zoom-lightbox {
background:
radial-gradient(
circle at 20% 10%,
rgba(235, 77, 151, 0.25),
transparent 28%
),
rgba(23, 15, 27, 0.82) !important;
backdrop-filter: blur(20px) saturate(1.15) !important;
}
.zoom-lightbox-inner {
width: min(1120px, 92vw) !important;
max-height: 90vh !important;
background: linear-gradient(135deg, #fff, #fbf5fb) !important;
border: 1px solid rgba(255, 255, 255, 0.7) !important;
border-radius: 34px !important;
padding: 22px !important;
display: grid;
place-items: center;
box-shadow:
0 40px 120px rgba(0, 0, 0, 0.42),
inset 0 0 0 1px rgba(235, 77, 151, 0.08) !important;
}
.zoom-lightbox-inner:before {
content: "GoGiftings premium preview";
position: absolute;
left: 26px;
top: 22px;
color: #7b3e74;
font-weight: 900;
background: #fff;
border: 1px solid rgba(235, 77, 151, 0.14);
border-radius: 999px;
padding: 9px 14px;
box-shadow: 0 12px 28px rgba(87, 42, 114, 0.12);
}
.zoom-lightbox img {
max-width: min(760px, 78vw) !important;
max-height: 78vh !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
border-radius: 24px !important;
box-shadow: 0 28px 80px rgba(87, 42, 114, 0.18);
}
.zoom-close {
right: 24px !important;
top: 24px !important;
width: 52px !important;
height: 52px !important;
background: #fff !important;
color: var(--gg-plum) !important;
box-shadow: 0 18px 44px rgba(87, 42, 114, 0.16) !important;
transition: 0.25s ease;
}
.zoom-close:hover {
transform: rotate(90deg) scale(1.04);
background: #f7ecf5 !important;
}
.lightbox-caption {
color: #6f5774 !important;
font-weight: 900 !important;
}
.buy-now-theme-btn,
.whatsapp-order-btn {
border: 0 !important;
border-radius: 15px !important;
background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
color: #fff !important;
box-shadow: 0 18px 42px rgba(246, 39, 128, 0.22);
min-height: 58px;
overflow: hidden;
position: relative;
}
.buy-now-theme-btn:before,
.whatsapp-order-btn:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.32),
transparent
);
transform: translateX(-120%);
transition: 0.65s ease;
}
.buy-now-theme-btn:hover:before,
.whatsapp-order-btn:hover:before {
transform: translateX(120%);
}
.buy-now-theme-btn:hover,
.whatsapp-order-btn:hover {
transform: translateY(-3px) scale(1.015);
box-shadow: 0 26px 58px rgba(246, 39, 128, 0.28);
}
.whatsapp-order-btn .wa-icon {
background: rgba(255, 255, 255, 0.18) !important;
color: #fff !important;
}
.whatsapp-order-btn em {
color: rgba(255, 255, 255, 0.86) !important;
}
.premium-product-actions {
grid-template-columns: 1fr 1.08fr !important;
}
.account-detail-page {
padding: 28px 0 54px;
background: #f8f3f7;
}
.account-detail-layout {
display: grid;
grid-template-columns: 290px 1fr;
gap: 24px;
}
.account-detail-card {
background: #fff;
border: 1px solid #ecd8e5;
border-radius: 24px;
padding: 28px;
box-shadow: 0 18px 54px rgba(87, 42, 114, 0.08);
}
.account-detail-card h1 {
margin: 0 0 22px;
font-size: 28px;
}
.account-mini-sidebar {
background: #fff;
border: 1px solid #ead7e3;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 18px 54px rgba(87, 42, 114, 0.07);
}
.account-mini-user {
padding: 22px;
background: linear-gradient(135deg, var(--gg-plum), var(--gg-deep));
color: #fff;
font-weight: 900;
}
.account-mini-sidebar a {
display: flex;
gap: 12px;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #f1e5ec;
color: #352a3c;
font-weight: 700;
}
.account-mini-sidebar a.active,
.account-mini-sidebar a:hover {
background: #fff3f8;
color: var(--gg-plum);
box-shadow: inset 4px 0 0 var(--gg-pink);
}
.gg-table-card {
border: 1px solid #e7d9e3;
border-radius: 18px;
padding: 18px;
margin-bottom: 18px;
}
.gg-status {
background: #159447;
color: #fff;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
}
.gg-topline {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-bottom: 16px;
}
.gg-metadata {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 14px;
}
.gg-metadata span {
background: #fff6fa;
border: 1px solid #f0dbe7;
border-radius: 9px;
padding: 8px 10px;
font-size: 12px;
}
.gg-order-row {
display: grid;
grid-template-columns: 86px 1fr 1fr 1fr 180px;
gap: 18px;
align-items: start;
}
.gg-order-row img {
width: 86px;
height: 86px;
object-fit: cover;
border-radius: 14px;
}
.gg-side-actions {
display: grid;
gap: 10px;
}
.gg-address-grid,
.gg-reminder-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.gg-address,
.gg-reminder {
border: 1px solid #ead9e3;
border-radius: 16px;
padding: 18px;
background: #fff;
transition: 0.25s ease;
}
.gg-address:hover,
.gg-reminder:hover {
transform: translateY(-5px);
box-shadow: 0 18px 42px rgba(87, 42, 114, 0.1);
}
.gg-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 42px;
}
.gg-form-grid label {
font-weight: 800;
color: #423545;
}
.gg-form-grid input,
.gg-form-grid select {
border: 0;
border-bottom: 1px solid #d6cbd4;
border-radius: 0;
padding: 12px 4px;
background: transparent;
}
.gg-wide {
grid-column: 1/-1;
}
.gg-wallet {
background: linear-gradient(135deg, #fff4fa, #f4eaf7);
border: 1px solid #ead2e1;
border-radius: 22px;
padding: 28px;
}
.gg-wallet strong {
display: block;
font-size: 42px;
color: var(--gg-plum);
margin: 8px 0;
}
.gg-switch-list {
display: grid;
gap: 18px;
max-width: 420px;
}
.gg-switch-list label {
display: flex;
justify-content: space-between;
align-items: center;
}
.gg-switch-list input {
accent-color: var(--gg-plum);
width: 42px;
height: 22px;
}
.gg-empty {
min-height: 240px;
display: grid;
place-items: center;
color: #6e6575;
font-weight: 700;
background: #fffafc;
border: 1px dashed #ead7e3;
border-radius: 18px;
}
@media (max-width: 980px) {
.login-premium-grid,
.login-card-premium,
.account-detail-layout {
grid-template-columns: 1fr;
}
.login-flower-frame {
min-height: 320px;
}
.gg-order-row {
grid-template-columns: 80px 1fr;
}
.gg-side-actions {
grid-column: 1/-1;
}
.gg-address-grid,
.gg-reminder-grid {
grid-template-columns: 1fr;
}
.gg-form-grid {
grid-template-columns: 1fr;
}
.zoom-lightbox-inner:before {
display: none;
}
}
@media (max-width: 640px) {
.login-premium-page {
padding: 26px 0;
}
.login-card-premium {
padding: 10px;
border-radius: 24px;
}
.login-form-panel {
padding: 26px 16px;
}
.login-story h1 {
font-size: 34px;
}
.premium-product-actions {
grid-template-columns: 1fr !important;
}
.zoom-lightbox {
padding: 12px !important;
}
.zoom-lightbox-inner {
border-radius: 22px !important;
padding: 12px !important;
}
.zoom-close {
width: 44px !important;
height: 44px !important;
}
}
/* ===============================
FINAL ULTRA PREMIUM V7 THEME
Luxury pastel pink + plum + soft champagne accents
=============================== */
:root {
--gg-rose: #f62780;
--gg-orchid: #f62780;
--gg-plum: #4f2a58;
--gg-velvet: #211523;
--gg-cream: #fffaf6;
--gg-blush: #fff4fa;
--gg-champagne: #c8a96a;
--gg-line: rgba(235, 77, 151, 0.18);
--gg-glass: rgba(255, 255, 255, 0.78);
--gg-cta: linear-gradient(135deg, #f62780 0%, #f62780 54%, #4f2a58 100%);
--gg-soft-gradient:
radial-gradient(
circle at 12% 8%,
rgba(235, 77, 151, 0.12),
transparent 28%
),
radial-gradient(
circle at 84% 12%,
rgba(200, 169, 106, 0.16),
transparent 26%
),
linear-gradient(135deg, #fff 0%, #fbf5fb 48%, #f8edf5 100%);
--gg-lux-shadow: 0 24px 80px rgba(87, 42, 114, 0.16);
}
html {
scroll-behavior: smooth;
}
body {
background: var(--gg-soft-gradient) !important;
}
.header-main {
background: rgba(255, 255, 255, 0.86) !important;
backdrop-filter: blur(18px);
box-shadow: 0 18px 60px rgba(87, 42, 114, 0.08);
}
.logo-mark {
box-shadow:
0 12px 28px rgba(235, 77, 151, 0.22),
inset 0 0 0 4px rgba(255, 255, 255, 0.72) !important;
animation: logoAura 4.8s ease-in-out infinite alternate;
}
@keyframes logoAura {
to {
filter: saturate(1.15);
transform: rotate(-2deg) scale(1.04);
}
}
.navbar {
background: linear-gradient(
90deg,
rgba(255, 244, 250, 0.96),
rgba(251, 237, 248, 0.94),
rgba(255, 250, 246, 0.96)
) !important;
}
.navbar a {
transition: 0.25s ease;
}
.navbar a:hover {
color: var(--gg-rose);
transform: translateY(-1px);
}
.btn,
.icon-btn,
.drawer-link,
.account-tile,
.product-card,
.category-card,
.blog-card,
.variant-card {
transition:
transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.28s ease,
border-color 0.28s ease,
background 0.28s ease;
}
.btn-primary,
.buy-now-theme-btn,
.whatsapp-order-btn,
.add-cart-premium-btn,
.final-premium-cta {
background: var(--gg-cta) !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 16px 42px rgba(155, 74, 143, 0.25) !important;
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn-primary:before,
.buy-now-theme-btn:before,
.whatsapp-order-btn:before,
.add-cart-premium-btn:before,
.final-premium-cta:before {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(
115deg,
transparent 0%,
rgba(255, 255, 255, 0.55) 38%,
transparent 70%
);
transform: translateX(-115%);
transition: transform 0.7s ease;
z-index: -1;
}
.btn-primary:hover:before,
.buy-now-theme-btn:hover:before,
.whatsapp-order-btn:hover:before,
.add-cart-premium-btn:hover:before,
.final-premium-cta:hover:before {
transform: translateX(115%);
}
.btn-primary:hover,
.buy-now-theme-btn:hover,
.whatsapp-order-btn:hover,
.add-cart-premium-btn:hover,
.final-premium-cta:hover {
transform: translateY(-3px) scale(1.015);
box-shadow: 0 24px 60px rgba(155, 74, 143, 0.35) !important;
}
.add-cart-premium-btn {
width: 100%;
border-radius: 18px !important;
min-height: 58px;
font-size: 16px;
letter-spacing: 0.01em;
}
.premium-product-actions {
grid-template-columns: 1fr 1fr !important;
gap: 14px !important;
}
.premium-product-actions .btn {
min-height: 62px;
border-radius: 18px !important;
display: flex !important;
align-items: center;
justify-content: center;
gap: 11px;
padding: 12px 18px !important;
}
.premium-product-actions strong {
display: block;
font-size: 15px;
line-height: 1;
}
.premium-product-actions em {
display: block;
font-style: normal;
font-size: 11px;
opacity: 0.84;
margin-top: 4px;
}
.cta-ico,
.wa-icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 12px;
background: rgba(255, 255, 255, 0.18);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.price-box {
border-radius: 18px !important;
border: 1px solid rgba(235, 77, 151, 0.2) !important;
background: linear-gradient(135deg, #fff, #fff6fb) !important;
box-shadow: 0 18px 50px rgba(87, 42, 114, 0.08);
position: relative;
overflow: hidden;
}
.price-box:after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at 12% 0%,
rgba(200, 169, 106, 0.16),
transparent 32%
);
pointer-events: none;
}
.price-box .amount {
font-size: 24px !important;
background: linear-gradient(135deg, var(--gg-plum), var(--gg-rose));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: priceBreath 2.6s ease-in-out infinite;
}
@keyframes priceBreath {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.035);
}
}
.product-page {
position: relative;
}
.product-summary {
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(235, 77, 151, 0.16);
border-radius: 26px;
padding: 22px;
box-shadow: var(--gg-lux-shadow);
backdrop-filter: blur(16px);
}
.product-summary .title {
font-size: clamp(20px, 2.6vw, 28px) !important;
letter-spacing: -0.04em;
color: var(--gg-velvet);
}
.visual-wrap {
border-radius: 26px !important;
border: 1px solid rgba(235, 77, 151, 0.16) !important;
background: linear-gradient(145deg, #fff, #fbf5fb) !important;
box-shadow: var(--gg-lux-shadow);
overflow: hidden;
position: relative;
}
.main-product-photo {
transition:
transform 0.48s cubic-bezier(0.2, 0.8, 0.2, 1),
filter 0.48s ease;
}
.visual-wrap:hover .main-product-photo {
transform: scale(1.08);
filter: saturate(1.06) contrast(1.04);
}
.visual-wrap:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent 30%,
rgba(255, 255, 255, 0.32),
transparent 70%
);
transform: translateX(-120%);
animation: productImageSheen 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes productImageSheen {
45%,
100% {
transform: translateX(120%);
}
}
.magnifier-hint-chip {
position: absolute;
left: 16px;
top: 16px;
z-index: 5;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
color: var(--gg-plum);
font-weight: 900;
font-size: 12px;
padding: 10px 14px;
box-shadow: 0 14px 34px rgba(87, 42, 114, 0.14);
backdrop-filter: blur(14px);
}
.magnifier-btn {
right: 16px !important;
top: 16px !important;
border-radius: 999px !important;
background: var(--gg-cta) !important;
color: #fff !important;
box-shadow: 0 16px 40px rgba(155, 74, 143, 0.28) !important;
}
.product-magnifier-lens {
border: 3px solid rgba(255, 255, 255, 0.92) !important;
box-shadow:
0 22px 50px rgba(87, 42, 114, 0.28),
inset 0 0 0 1px rgba(87, 42, 114, 0.18) !important;
}
.gallery-thumb,
.variant-card {
border-radius: 18px !important;
border-color: rgba(235, 77, 151, 0.16) !important;
background: rgba(255, 255, 255, 0.82) !important;
box-shadow: 0 12px 28px rgba(87, 42, 114, 0.08);
}
.gallery-thumb:hover,
.variant-card:hover {
transform: translateY(-4px);
box-shadow: 0 22px 46px rgba(87, 42, 114, 0.14);
border-color: rgba(235, 77, 151, 0.34) !important;
}
.variant-card.active,
.gallery-thumb.active {
outline: 0 !important;
border-color: var(--gg-rose) !important;
box-shadow: 0 16px 42px rgba(235, 77, 151, 0.18);
}
.premium-product-promises {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 16px 0;
}
.premium-product-promises span {
border: 1px solid rgba(235, 77, 151, 0.16);
border-radius: 16px;
background: rgba(255, 255, 255, 0.72);
padding: 12px 13px;
font-weight: 800;
color: #5d5161;
font-size: 12px;
box-shadow: 0 12px 30px rgba(87, 42, 114, 0.06);
}
.zoom-lightbox {
background: rgba(26, 18, 30, 0.72) !important;
backdrop-filter: blur(18px) saturate(1.12) !important;
}
.zoom-lightbox-inner {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.94),
rgba(255, 246, 251, 0.9)
) !important;
border: 1px solid rgba(255, 255, 255, 0.56) !important;
box-shadow: 0 44px 120px rgba(0, 0, 0, 0.45) !important;
}
.zoom-lightbox-inner img {
border-radius: 22px !important;
box-shadow: 0 24px 80px rgba(87, 42, 114, 0.24);
animation: lightboxBloom 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes lightboxBloom {
from {
opacity: 0;
transform: scale(0.94) translateY(14px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.zoom-close {
background: #fff !important;
color: var(--gg-plum) !important;
box-shadow: 0 16px 42px rgba(87, 42, 114, 0.2) !important;
}
.footer,
footer {
background: linear-gradient(
180deg,
#fff 0%,
#fff6fb 48%,
#f7eaf3 100%
) !important;
border-top: 1px solid rgba(235, 77, 151, 0.16) !important;
position: relative;
overflow: hidden;
}
.footer:before,
footer:before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(
circle at 12% 0%,
rgba(235, 77, 151, 0.12),
transparent 24%
),
radial-gradient(
circle at 84% 0%,
rgba(200, 169, 106, 0.14),
transparent 22%
);
pointer-events: none;
}
.footer *,
footer * {
position: relative;
}
.footer a:hover,
footer a:hover {
color: var(--gg-rose) !important;
}
.login-premium-page {
background: var(--gg-soft-gradient) !important;
}
.login-card-premium {
border-radius: 38px !important;
box-shadow: 0 38px 120px rgba(87, 42, 114, 0.18) !important;
border: 1px solid rgba(235, 77, 151, 0.2) !important;
}
.login-form-panel h2 {
font-size: clamp(30px, 3vw, 44px) !important;
background: linear-gradient(135deg, var(--gg-velvet), var(--gg-plum));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.premium-login-form input {
min-height: 56px;
border-radius: 18px !important;
}
.premium-login-form button {
min-height: 58px;
border-radius: 18px !important;
}
.login-otp-demo {
display: grid;
grid-template-columns: repeat(6, 44px);
gap: 10px;
justify-content: center;
margin: 18px 0 6px;
}
.login-otp-demo span {
height: 48px;
border-radius: 14px;
border: 1px solid rgba(155, 74, 143, 0.22);
background: linear-gradient(180deg, #fff, #fff6fb);
display: grid;
place-items: center;
color: #b7a9b8;
font-size: 20px;
font-weight: 800;
animation: otpBoxFloat 1.8s ease-in-out infinite;
}
.login-otp-demo span:nth-child(2) {
animation-delay: 0.1s;
}
.login-otp-demo span:nth-child(3) {
animation-delay: 0.2s;
}
.login-otp-demo span:nth-child(4) {
animation-delay: 0.3s;
}
.login-otp-demo span:nth-child(5) {
animation-delay: 0.4s;
}
.login-otp-demo span:nth-child(6) {
animation-delay: 0.5s;
}
@keyframes otpBoxFloat {
50% {
transform: translateY(-4px);
border-color: var(--gg-rose);
box-shadow: 0 12px 26px rgba(235, 77, 151, 0.12);
}
}
.account-hero,
.account-detail-page {
background: var(--gg-soft-gradient) !important;
}
.account-tile,
.account-mini-sidebar,
.account-content-card,
.gg-panel {
background: rgba(255, 255, 255, 0.86) !important;
border: 1px solid rgba(235, 77, 151, 0.15) !important;
box-shadow: 0 20px 60px rgba(87, 42, 114, 0.1) !important;
backdrop-filter: blur(16px);
}
.account-tile:hover {
transform: translateY(-8px) scale(1.01);
box-shadow: 0 32px 84px rgba(87, 42, 114, 0.18) !important;
}
.account-mini-user {
background: var(--gg-cta) !important;
}
.account-mini-sidebar a.active,
.account-mini-sidebar a:hover {
background: #fbf2f9 !important;
color: var(--gg-plum) !important;
border-color: rgba(235, 77, 151, 0.18) !important;
}
.product-card:hover,
.blog-card:hover,
.category-card:hover,
.occasion-card:hover {
transform: translateY(-8px);
box-shadow: 0 26px 70px rgba(87, 42, 114, 0.16) !important;
}
.product-card img,
.blog-card img,
.category-card img {
transition:
transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
filter 0.4s ease;
}
.product-card:hover img,
.blog-card:hover img,
.category-card:hover img {
transform: scale(1.1);
filter: saturate(1.08) contrast(1.04);
}
.hero-card {
background:
radial-gradient(
circle at 12% 8%,
rgba(235, 77, 151, 0.13),
transparent 28%
),
linear-gradient(135deg, #fff, #fff4fa 58%, #f3e8f1) !important;
border: 1px solid rgba(235, 77, 151, 0.16) !important;
box-shadow: 0 32px 100px rgba(87, 42, 114, 0.14) !important;
}
.hero-copy h1 {
letter-spacing: -0.05em;
}
.hero-visual {
border-radius: 30px;
}
.hero-visual:before {
content: "";
position: absolute;
inset: 18px;
border-radius: 28px;
border: 1px solid rgba(255, 255, 255, 0.7);
pointer-events: none;
z-index: 2;
}
@media (max-width: 768px) {
.premium-product-actions {
grid-template-columns: 1fr !important;
}
.premium-product-promises {
grid-template-columns: 1fr;
}
.login-otp-demo {
grid-template-columns: repeat(6, 1fr);
}
.login-otp-demo span {
height: 42px;
}
.magnifier-hint-chip {
display: none;
}
.product-summary {
padding: 16px;
}
.visual-wrap:after {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* FINAL V8 pastel pink theme refinement + quiet magnifier */
:root {
--bg: #fbf5fb;
--card: #ffffff;
--text: #231727;
--muted: #7a6675;
--line: #f3dce9;
--soft: #f7ecf5;
--soft-2: #fdeaf4;
--brand: #f28ab8;
--brand-2: #d96aa4;
--gg-blush: #fbf5fb;
--gg-petal: #fdeaf4;
--gg-rose: #f28ab8;
--gg-orchid: #d96aa4;
--gg-plum: #7a3c75;
--gg-gold: #c8a96a;
--gg-cta: linear-gradient(135deg, #f28ab8 0%, #d96aa4 52%, #b95c98 100%);
--shadow: 0 14px 34px rgba(217, 106, 164, 0.1);
}
body {
background: linear-gradient(180deg, #fbf5fb 0%, #fff 38%, #fbf5fb 100%);
}
.topbar {
background: linear-gradient(90deg, #f7b6d2, #e58ab9, #c778ab) !important;
}
.navbar {
background: linear-gradient(90deg, #fff4fa, #fdeaf4, #fbf5fb) !important;
border-top-color: #f4d9e8 !important;
}
.header-main {
box-shadow: 0 10px 28px rgba(217, 106, 164, 0.08);
border-bottom-color: #f3dce9 !important;
}
.hero-card,
.card,
.panel,
.soft-panel,
.product-card,
.category-card,
.mini-card,
.checkout-card,
.summary-card,
.feature-card,
.form-card,
.status-card,
.sidebar,
.footer,
.site-footer {
border-color: #f3dce9 !important;
box-shadow: 0 14px 34px rgba(217, 106, 164, 0.1) !important;
}
.btn-primary,
.btn-premium,
.buy-now-btn,
.add-cart-btn,
.whatsapp-order-btn,
.premium-product-actions .btn,
.premium-btn {
background: var(--gg-cta) !important;
border-color: transparent !important;
color: #fff !important;
box-shadow: 0 16px 36px rgba(217, 106, 164, 0.24) !important;
}
.btn-primary:hover,
.btn-premium:hover,
.buy-now-btn:hover,
.add-cart-btn:hover,
.whatsapp-order-btn:hover,
.premium-product-actions .btn:hover,
.premium-btn:hover {
transform: translateY(-2px) scale(1.015);
box-shadow: 0 22px 48px rgba(217, 106, 164, 0.32) !important;
}
.footer,
.site-footer,
footer {
background: linear-gradient(
180deg,
#fff 0%,
#fff6fb 42%,
#fdeaf4 100%
) !important;
border-top: 1px solid #f3dce9 !important;
}
.product-thumb,
.visual-wrap,
.main-visual,
.image-visual-wrap {
background: linear-gradient(145deg, #fff, #fff4fa) !important;
border-color: #f3dce9 !important;
}
.magnifier-hint-chip,
.magnifier-btn {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.final-magnifier-stage:before {
display: none !important;
content: none !important;
}
.product-magnifier-lens {
width: 132px !important;
height: 132px !important;
border: 2px solid rgba(255, 255, 255, 0.95) !important;
box-shadow:
0 20px 58px rgba(217, 106, 164, 0.26),
inset 0 0 0 1px rgba(242, 138, 184, 0.22) !important;
}
/* === Ultra premium animated footer polish v9 === */
.premium-footer {
position: relative;
overflow: hidden;
background:
radial-gradient(
circle at 8% 16%,
rgba(255, 196, 222, 0.54),
transparent 28%
),
radial-gradient(
circle at 92% 24%,
rgba(244, 174, 211, 0.38),
transparent 30%
),
linear-gradient(180deg, #fffafb 0%, #fff1f7 48%, #ffe7f2 100%) !important;
isolation: isolate;
}
.premium-footer:before,
.premium-footer:after {
content: "";
position: absolute;
width: 360px;
height: 360px;
border-radius: 999px;
pointer-events: none;
z-index: -1;
filter: blur(10px);
opacity: 0.55;
animation: footerOrbFloat 12s ease-in-out infinite alternate;
}
.premium-footer:before {
left: -130px;
top: 70px;
background: radial-gradient(
circle,
rgba(235, 77, 151, 0.26),
transparent 68%
);
}
.premium-footer:after {
right: -130px;
bottom: -120px;
background: radial-gradient(
circle,
rgba(155, 74, 143, 0.22),
transparent 68%
);
animation-delay: -4s;
}
@keyframes footerOrbFloat {
from {
transform: translate3d(0, 0, 0) scale(1);
}
to {
transform: translate3d(28px, -24px, 0) scale(1.08);
}
}
.footer-ribbon-card {
position: relative;
overflow: hidden;
background: linear-gradient(
135deg,
#f07db4 0%,
#d9579c 45%,
#f62780 100%
) !important;
box-shadow:
0 28px 80px rgba(155, 74, 143, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}
.footer-ribbon-card:before {
content: "";
position: absolute;
inset: -70% auto auto -20%;
width: 46%;
height: 240%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.34),
transparent
);
transform: rotate(18deg);
animation: footerShimmer 6.5s ease-in-out infinite;
}
@keyframes footerShimmer {
0%,
58% {
translate: -160% 0;
opacity: 0;
}
68% {
opacity: 1;
}
100% {
translate: 430% 0;
opacity: 0;
}
}
.footer-brand-card,
.footer-mini-info {
position: relative;
overflow: hidden;
background: rgba(255, 255, 255, 0.82) !important;
backdrop-filter: blur(14px);
transition:
transform 0.35s ease,
box-shadow 0.35s ease,
border-color 0.35s ease;
}
.footer-brand-card:hover,
.footer-mini-info:hover {
transform: translateY(-5px);
border-color: rgba(235, 77, 151, 0.32);
box-shadow: 0 24px 68px rgba(246, 39, 128, 0.12);
}
.footer-brand-card p,
.footer-mini-info p {
text-align: justify !important;
text-justify: inter-word;
max-width: 420px !important;
line-height: 1.76 !important;
overflow-wrap: anywhere;
hyphens: auto;
}
.footer-brand-card {
max-width: 520px;
}
.footer-main-grid {
align-items: stretch !important;
}
.footer-col a {
position: relative;
width: max-content;
max-width: 100%;
transition:
color 0.25s ease,
transform 0.25s ease;
}
.footer-col a:after {
content: "";
position: absolute;
left: 0;
right: 100%;
bottom: 1px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, #f07db4, #f62780);
transition: right 0.28s ease;
}
.footer-col a:hover {
color: #f62780;
transform: translateX(3px);
}
.footer-col a:hover:after {
right: 0;
}
.footer-contact-pills a {
min-height: 42px;
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
background 0.28s ease,
color 0.28s ease,
border-color 0.28s ease;
}
.footer-contact-pills a:hover {
transform: translateY(-2px) scale(1.025);
box-shadow: 0 12px 30px rgba(246, 39, 128, 0.12);
}
.footer-whatsapp,
.footer-contact-pills a[href*="wa.me"] {
color: #128c7e !important;
border-color: rgba(37, 211, 102, 0.42) !important;
background: linear-gradient(
135deg,
rgba(37, 211, 102, 0.12),
rgba(255, 255, 255, 0.92)
) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.footer-whatsapp:before,
.footer-contact-pills a[href*="wa.me"]:before {
content: "";
width: 18px;
height: 18px;
flex: 0 0 18px;
border-radius: 50%;
background: #25d366;
box-shadow: 0 0 0 5px rgba(37, 211, 102, 0.12);
-webkit-mask: url('data:image/svg+xml;utf8,')
center/contain no-repeat;
mask: url('data:image/svg+xml;utf8,')
center/contain no-repeat;
}
.footer-whatsapp:hover,
.footer-contact-pills a[href*="wa.me"]:hover {
background: linear-gradient(135deg, #25d366, #128c7e) !important;
color: #fff !important;
border-color: #25d366 !important;
box-shadow: 0 14px 34px rgba(37, 211, 102, 0.26) !important;
}
.footer-whatsapp:hover:before,
.footer-contact-pills a[href*="wa.me"]:hover:before {
background: #fff;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.18);
}
.footer-subscribe {
position: relative;
z-index: 2;
}
.footer-subscribe input {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.22),
0 10px 22px rgba(87, 42, 114, 0.1);
}
.footer-subscribe button {
background: linear-gradient(135deg, #fff, #ffe7f2) !important;
color: #5a1a93 !important;
box-shadow: 0 12px 30px rgba(87, 42, 114, 0.18);
transition:
transform 0.28s ease,
box-shadow 0.28s ease;
}
.footer-subscribe button:hover {
transform: translateY(-2px);
box-shadow: 0 18px 40px rgba(87, 42, 114, 0.24);
}
.footer-badges span {
animation: footerBadgeBreathe 4.5s ease-in-out infinite;
}
.footer-badges span:nth-child(2) {
animation-delay: 0.7s;
}
.footer-badges span:nth-child(3) {
animation-delay: 1.4s;
}
@keyframes footerBadgeBreathe {
0%,
100% {
transform: translateY(0);
box-shadow: none;
}
50% {
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(235, 77, 151, 0.1);
}
}
@media (max-width: 760px) {
.footer-brand-card p,
.footer-mini-info p {
max-width: 100% !important;
text-align: left !important;
}
.premium-footer:before,
.premium-footer:after {
width: 240px;
height: 240px;
}
.footer-contact-pills a {
width: 100%;
justify-content: center;
}
.footer-col a {
width: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.premium-footer:before,
.premium-footer:after,
.footer-ribbon-card:before,
.footer-badges span {
animation: none !important;
}
.footer-brand-card,
.footer-mini-info,
.footer-col a,
.footer-contact-pills a,
.footer-subscribe button {
transition: none !important;
}
}
/* === Client requested polish: plans, hero crop, footer legal, WhatsApp, transparent popup, magnifier, location === */
.hero-grid-refined,
.hero-card-image {
overflow: visible !important;
}
.hero-card-image {
min-height: auto;
padding-bottom: 34px !important;
}
.hero-swatcher {
margin-bottom: 0 !important;
transform: none !important;
}
@media (max-width: 900px) {
.hero-card-image {
padding-bottom: 42px !important;
}
.hero-grid-refined {
gap: 22px !important;
}
}
.subscription-card.mini-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 150px;
padding: 18px !important;
border-radius: 22px;
background: linear-gradient(180deg, #fff, #fbf5fb);
box-shadow: 0 14px 34px rgba(246, 39, 128, 0.1);
}
.subscription-card h3 {
margin: 0 0 8px;
font-size: 22px;
line-height: 1.15;
}
.subscription-card .plan-price {
color: #3d3747;
font-size: 16px;
line-height: 1.45;
min-height: 44px;
}
.subscribe-pill {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 14px;
width: 100%;
min-height: 42px;
border-radius: 999px;
background: linear-gradient(135deg, var(--brand), var(--brand-2));
color: #fff !important;
font-weight: 900;
box-shadow: 0 12px 26px rgba(235, 77, 151, 0.22);
white-space: nowrap;
}
.subscribe-pill:hover {
transform: translateY(-2px);
box-shadow: 0 18px 34px rgba(235, 77, 151, 0.3);
}
.sub-product-grid {
grid-template-columns: repeat(4, minmax(170px, 1fr));
align-items: stretch;
}
@media (max-width: 900px) {
.sub-product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 520px) {
.sub-product-grid {
grid-template-columns: 1fr;
}
}
.footer-legal-seo {
padding: 22px 0 10px;
text-align: center;
color: #3d3545;
border-top: 1px solid rgba(235, 215, 228, 0.8);
font-size: 14px;
line-height: 1.8;
}
.footer-legal-seo p {
margin: 4px 0;
}
.footer-legal-seo span {
color: #9a8795;
margin: 0 8px;
}
.footer-legal-seo a {
color: #5a1a93;
font-weight: 800;
}
.refined-footer-bottom {
justify-content: center !important;
text-align: center;
gap: 24px !important;
flex-wrap: wrap;
padding-top: 20px !important;
}
.whatsapp-order-btn {
background: linear-gradient(135deg, #18d95f, #0aa846) !important;
border-color: rgba(37, 211, 102, 0.42) !important;
}
.wa-icon {
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.96) !important;
overflow: hidden;
transform: none !important;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
}
.wa-icon img {
width: 100%;
height: 100%;
object-fit: contain;
padding: 3px;
}
.product-lightbox,
.image-popup,
.modal.product-image-modal {
background: rgba(31, 18, 30, 0.48) !important;
backdrop-filter: blur(12px);
}
.product-lightbox img,
.image-popup img,
.modal.product-image-modal img {
background: transparent !important;
box-shadow: none !important;
}
.product-drawer,
.addon-drawer {
background: rgba(54, 31, 50, 0.34) !important;
backdrop-filter: blur(10px);
}
.product-drawer-panel,
.addon-panel {
background: rgba(255, 255, 255, 0.94) !important;
}
.magnifier-btn {
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.92) !important;
border: 1px solid rgba(235, 77, 151, 0.25) !important;
box-shadow: 0 14px 34px rgba(79, 40, 74, 0.16) !important;
color: #5a1a93 !important;
font-weight: 900;
}
.product-magnifier-lens,
.zoom-lens {
border: 3px solid rgba(255, 255, 255, 0.96) !important;
box-shadow:
0 18px 45px rgba(79, 40, 74, 0.24),
inset 0 0 0 1px rgba(235, 77, 151, 0.22) !important;
border-radius: 50% !important;
}
.location-overlay {
background: rgba(45, 25, 44, 0.38) !important;
backdrop-filter: blur(16px) saturate(1.15) !important;
}
.location-modal {
border-radius: 34px !important;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.96),
rgba(255, 246, 251, 0.94)
) !important;
box-shadow: 0 42px 100px rgba(74, 38, 68, 0.28) !important;
}
.location-head {
background: linear-gradient(135deg, #fff, #f7ecf5);
padding: 24px 28px !important;
}
.location-head h2 {
font-size: clamp(26px, 3vw, 38px) !important;
}
.close-x {
border-radius: 50% !important;
width: 52px !important;
height: 52px !important;
background: #fff !important;
}
.location-body .select,
.select {
border-radius: 18px !important;
border: 1px solid #efbfd4 !important;
background: #fff !important;
padding: 14px 16px !important;
box-shadow: 0 8px 20px rgba(79, 40, 74, 0.06);
}
.city-pill {
height: 68px !important;
border-radius: 20px !important;
font-weight: 800;
box-shadow: 0 10px 22px rgba(79, 40, 74, 0.08);
transition: 0.25s ease;
}
.city-pill:hover,
.city-pill.active {
background: linear-gradient(135deg, #ffe9f4, #fff) !important;
border-color: #f62780 !important;
color: #5a1a93 !important;
transform: translateY(-2px);
}
.csr-policy-page {
max-width: 980px;
margin: 0 auto;
}
.csr-policy-page h1 {
font-size: clamp(34px, 5vw, 54px);
line-height: 1.05;
margin: 10px 0 18px;
}
.csr-policy-page h2 {
margin-top: 26px;
color: #5a1a93;
}
.csr-policy-page p {
color: #665d6d;
font-size: 17px;
}
/* Critical visibility fixes: keep overlays/drawers closed until opened */
[hidden] {
display: none !important;
}
.location-overlay[hidden],
.product-drawer[hidden],
.image-popup[hidden],
.product-lightbox[hidden],
.zoom-lightbox[hidden],
.modal[hidden] {
display: none !important;
}
.addon-drawer[aria-hidden="true"],
.cart-drawer[aria-hidden="true"],
.mobile-menu[aria-hidden="true"] {
display: none !important;
}
.addon-drawer[aria-hidden="false"],
.cart-drawer[aria-hidden="false"] {
display: grid !important;
}
/* Softer transparent product popup and clearer magnifier */
.modal.product-image-modal,
.product-lightbox,
.image-popup,
.zoom-lightbox {
background: rgba(31, 18, 30, 0.18) !important;
backdrop-filter: none !important;
}
.product-lightbox img,
.image-popup img,
.modal.product-image-modal img {
background: transparent !important;
box-shadow: none !important;
}
.magnifier-btn {
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.96) !important;
border: 1px solid rgba(235, 77, 151, 0.35) !important;
box-shadow: 0 12px 30px rgba(79, 40, 74, 0.18) !important;
}
.product-magnifier-lens,
.zoom-lens {
border: 3px solid rgba(255, 255, 255, 0.98) !important;
box-shadow:
0 16px 42px rgba(79, 40, 74, 0.22),
inset 0 0 0 1px rgba(235, 77, 151, 0.25) !important;
border-radius: 50% !important;
}
/* Location selector remains premium only when opened */
.location-overlay {
background: rgba(45, 25, 44, 0.26) !important;
backdrop-filter: blur(8px) saturate(1.08) !important;
}
/* Final GoGiftings fixes: remove hero mood chips, transparent product preview, and polished subscription cards */
.hero-swatcher,
[data-hero-swatcher],
.hero-swatch {
display: none !important;
}
.zoom-lightbox {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
pointer-events: auto;
}
.zoom-lightbox-inner {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
width: auto !important;
max-width: 92vw !important;
max-height: 92vh !important;
}
.zoom-lightbox-inner::before,
.lightbox-caption {
display: none !important;
}
.zoom-lightbox img {
max-width: 92vw !important;
max-height: 88vh !important;
object-fit: contain !important;
border-radius: 22px !important;
box-shadow: 0 24px 80px rgba(36, 24, 42, 0.26) !important;
background: transparent !important;
}
.zoom-close {
right: -18px !important;
top: -18px !important;
width: 46px !important;
height: 46px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.92) !important;
color: var(--gg-plum, #4f2a58) !important;
box-shadow: 0 14px 34px rgba(36, 24, 42, 0.18) !important;
}
.subscription-card {
min-width: 0 !important;
overflow: hidden !important;
text-align: center !important;
padding: 22px 14px 18px !important;
border-radius: 24px !important;
border: 1px solid rgba(235, 77, 151, 0.2) !important;
background:
radial-gradient(
circle at 50% 100%,
rgba(235, 77, 151, 0.12),
transparent 45%
),
linear-gradient(180deg, #fff, #fbf5fb) !important;
box-shadow: 0 18px 44px rgba(87, 42, 114, 0.08) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
}
.subscription-card h3 {
width: 100% !important;
margin: 0 !important;
font-size: clamp(18px, 1.5vw, 22px) !important;
line-height: 1.15 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
color: #24182a !important;
}
.subscription-card .plan-price {
margin: 0 !important;
color: #4f4757 !important;
font-size: 16px !important;
line-height: 1.55 !important;
min-height: 50px !important;
}
.subscribe-pill {
width: 100% !important;
max-width: 130px !important;
min-height: 42px !important;
padding: 11px 12px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
font-weight: 900 !important;
font-size: 14px !important;
text-decoration: none !important;
background: linear-gradient(135deg, #9a4a8b, #f62780) !important;
box-shadow: 0 12px 24px rgba(216, 76, 151, 0.28) !important;
transform: none !important;
}
.subscribe-pill:hover {
transform: translateY(-2px) !important;
box-shadow: 0 16px 30px rgba(216, 76, 151, 0.34) !important;
}
.mini-stats:has(.subscription-card) {
display: grid !important;
grid-template-columns: repeat(4, minmax(120px, 1fr)) !important;
gap: 14px !important;
align-items: stretch !important;
}
@media (max-width: 900px) {
.mini-stats:has(.subscription-card) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 520px) {
.mini-stats:has(.subscription-card) {
grid-template-columns: 1fr !important;
}
}
/* === Purple gradient theme update from requested Add to Cart color === */
:root {
--bg: #fbf7fb;
--line: #e6d3e3;
--soft: #f8f0f7;
--soft-2: #f3e9f2;
--brand: #f62780;
--brand-2: #8f3f83;
--brand-3: #5f2b59;
--brand-gradient: linear-gradient(
135deg,
#6d3066 0%,
#f62780 48%,
#5a1a93 100%
);
--shadow: 0 14px 34px rgba(91, 39, 85, 0.12);
}
body {
background:
radial-gradient(
circle at 12% -10%,
rgba(123, 54, 113, 0.1),
transparent 34%
),
radial-gradient(
circle at 92% 8%,
rgba(154, 71, 141, 0.09),
transparent 30%
),
var(--bg) !important;
}
.topbar,
.btn-primary,
.quick-add,
.subscribe-pill,
.recommend-pill,
.city-pill.active,
.date-tile.active,
.drawer-tab-row button.active,
.product-drawer .drawer-tab-row button.active,
.mobile-tab.active,
.add-cart-premium-btn,
.buy-now-theme-btn,
.offer-chip,
.footer-ribbon-card {
background: var(--brand-gradient) !important;
border-color: transparent !important;
color: #fff !important;
box-shadow: 0 16px 34px rgba(123, 54, 113, 0.28) !important;
}
.btn-primary:hover,
.quick-add:hover,
.add-cart-premium-btn:hover,
.buy-now-theme-btn:hover {
transform: translateY(-2px);
box-shadow: 0 20px 42px rgba(123, 54, 113, 0.34) !important;
filter: saturate(1.06);
}
.logo-mark,
.ai-assistant-trigger,
.nav-pill,
.icon-btn .badge {
background: linear-gradient(135deg, #6d3066, #5a1a93) !important;
color: #fff !important;
}
.navbar {
background: linear-gradient(90deg, #f6edf5, #efe0ed) !important;
}
.navbar a.active,
.breadcrumb span,
.pink,
.field-label,
.advisor-result span {
color: var(--brand) !important;
}
.badge-pill,
.chip.active {
color: var(--brand) !important;
background: linear-gradient(135deg, #fff, #f4e5f1) !important;
border-color: #d7a5cc !important;
}
.hero-card-image,
.banner,
.category-like-occasion .category-occasion-card,
.ai-mini-banner,
.product-thumb,
.hero-media,
.page-visual-card,
.subscription-card {
background: linear-gradient(
135deg,
#fff 0%,
#fbf5fb 45%,
#efe0ed 100%
) !important;
border-color: var(--line) !important;
}
.product-card:hover,
.occasion-card:hover,
.category-card:hover,
.mini-card:hover {
border-color: rgba(123, 54, 113, 0.3) !important;
box-shadow: 0 18px 44px rgba(91, 39, 85, 0.14) !important;
}
.site-footer,
.premium-footer {
background: linear-gradient(
180deg,
#fff 0%,
#fbf2f9 55%,
#efe0ed 100%
) !important;
border-top-color: var(--line) !important;
}
.footer-newsletter,
.footer-ribbon-card {
background: linear-gradient(
135deg,
#6d3066 0%,
#f62780 52%,
#5a1a93 100%
) !important;
}
::selection {
background: rgba(123, 54, 113, 0.22);
}
/* === FINAL CLIENT FIX: make Buy Now + WhatsApp match Add to Cart purple gradient and clean magnifier === */
:root {
--gg-purple-main: #f62780;
--gg-purple-deep: #6d3066;
--gg-purple-light: #5a1a93;
--gg-purple-gradient: linear-gradient(
135deg,
#6d3066 0%,
#f62780 48%,
#5a1a93 100%
);
}
/* All order CTAs now use the exact Add to Cart style */
.btn-primary,
.quick-add,
.add-cart-premium-btn,
.buy-now-theme-btn,
.buy-now-btn,
.add-cart-btn,
.final-premium-cta,
.product-summary .btn-secondary[href="checkout.html"],
.premium-product-actions .btn,
.whatsapp-order-btn,
.mobile-whatsapp-fab,
.footer-whatsapp,
a[href*="wa.me"].btn,
a[href*="wa.me"].btn-secondary,
a[href*="wa.me"].btn-primary {
background: var(--gg-purple-gradient) !important;
background-color: var(--gg-purple-main) !important;
border-color: transparent !important;
color: #fff !important;
box-shadow: 0 16px 36px rgba(123, 54, 113, 0.28) !important;
}
.whatsapp-order-btn *,
.buy-now-theme-btn *,
.product-summary .btn-secondary[href="checkout.html"] *,
a[href*="wa.me"].btn *,
a[href*="wa.me"].btn-secondary *,
a[href*="wa.me"].btn-primary * {
color: #fff !important;
}
.whatsapp-order-btn:hover,
.buy-now-theme-btn:hover,
.buy-now-btn:hover,
.product-summary .btn-secondary[href="checkout.html"]:hover,
a[href*="wa.me"].btn:hover,
a[href*="wa.me"].btn-secondary:hover,
a[href*="wa.me"].btn-primary:hover,
.mobile-whatsapp-fab:hover,
.footer-whatsapp:hover {
background: linear-gradient(
135deg,
#5f2b59 0%,
#f62780 45%,
#a74a99 100%
) !important;
box-shadow: 0 22px 52px rgba(123, 54, 113, 0.36) !important;
transform: translateY(-2px) scale(1.015);
}
.wa-icon,
.whatsapp-order-btn .wa-icon,
.cta-ico {
background: rgba(255, 255, 255, 0.18) !important;
border: 1px solid rgba(255, 255, 255, 0.22) !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12) !important;
}
/* Remove the extra magnifier chip/button/lens, keep image popup click clean */
.magnifier-btn,
.magnifier-hint-chip,
.product-magnifier-lens,
.zoom-lens,
.magnifier-toast,
.image-visual-wrap:after,
.final-magnifier-stage:before {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
content: none !important;
}
.image-visual-wrap,
.final-magnifier-stage,
[data-gallery-main] {
cursor: pointer !important;
}
.image-visual-wrap.is-zooming .main-product-photo,
.magnifier-active .main-product-photo {
transform: none !important;
}
/* === Client cleanup: no image popup, no purple ticker/chip, smoother performance === */
.zoom-lightbox,
.gg-image-preview-modal,
.gg-preview-backdrop,
.gg-preview-shell,
.gg-preview-stage,
.gg-preview-caption,
.gg-preview-toolbar,
.product-magnifier-lens,
.zoom-lens,
.magnifier-btn,
.magnifier-hint-chip,
.magnifier-toast {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
[data-gallery-main],
.image-visual-wrap,
.final-magnifier-stage,
.visual-wrap,
.product-thumb,
.thumb-wrap {
cursor: default !important;
}
[data-gallery-main]::after,
.image-visual-wrap::after,
.final-magnifier-stage::after,
.visual-wrap::after,
.product-thumb::after,
.thumb-wrap::after,
.hero-card::before,
.hero-card-image::after,
.price-box::after {
content: none !important;
display: none !important;
animation: none !important;
}
.logo-mark,
.zoom-breathe img,
.product-thumb img,
.variant-photo,
.gallery-photo,
.main-product-photo,
.price,
.amount,
.price-box .amount,
.variant-copy strong,
.product-card .price,
.login-otp-demo span,
.otp-preview span,
.wa-glow,
.footer-badges span,
.login-card-premium:before,
.login-flower-frame img,
.login-orb,
.account-hero:before,
.account-hero:after {
animation: none !important;
}
.visual-wrap:hover .main-product-photo,
.image-visual-wrap.is-zooming .main-product-photo,
.magnifier-active .main-product-photo {
transform: none !important;
filter: none !important;
}
.product-card,
.blog-card,
.category-card,
.offer-card,
.addon-card,
.footer,
.addon-panel {
content-visibility: auto;
contain-intrinsic-size: 320px;
}
html {
scroll-behavior: auto !important;
}
/* Checkout sender/recipient details upgrade */
.checkout-details-card {
display: grid;
gap: 24px;
}
.details-section {
border-radius: 14px;
}
.details-heading {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
}
.details-heading strong {
display: block;
font-size: 20px;
color: #061629;
}
.details-heading small {
display: block;
font-size: 15px;
margin-top: 3px;
color: #0057ff;
}
.details-icon {
width: 40px;
height: 40px;
border-radius: 999px;
display: grid;
place-items: center;
color: #fff;
}
.billing-icon {
background: #5275f5;
}
.recipient-icon {
background: #18bea0;
}
.recipient-section {
background: #ecfff8;
border: 1px solid #b9f6da;
padding: 28px 24px;
}
.recipient-section .details-heading small {
color: #00935d;
}
.checkout-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.float-field {
position: relative;
display: block;
}
.float-field > span {
position: absolute;
top: -9px;
left: 12px;
z-index: 2;
background: #fff;
padding: 0 6px;
font-size: 12px;
font-weight: 700;
color: #9b238c;
line-height: 1;
}
.recipient-section .float-field > span {
background: #ecfff8;
color: #009f78;
}
.float-field input,
.float-field select,
.phone-control {
width: 100%;
height: 52px;
border: 2px solid #bd42ab;
border-radius: 6px;
background: #fff;
color: #111827;
padding: 0 16px;
font-size: 16px;
outline: none;
transition:
border-color 0.18s ease,
box-shadow 0.18s ease;
}
.recipient-section .float-field input,
.recipient-section .float-field select,
.recipient-section .phone-control {
border-color: #18d89a;
background: #fff;
}
.float-field input:focus,
.float-field select:focus,
.phone-control:focus-within {
box-shadow: 0 0 0 4px rgba(24, 216, 154, 0.12);
}
.phone-control {
display: flex;
align-items: center;
padding: 0;
overflow: hidden;
}
.phone-control input {
border: 0;
height: 48px;
box-shadow: none !important;
border-radius: 0;
}
.country-code {
align-self: stretch;
min-width: 42px;
border: 0;
border-right: 1px solid #d4d4d8;
background: #f8f8f8;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
.country-code em {
font-style: normal;
font-size: 10px;
color: #444;
}
.select-field select {
appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, #94a3b8 50%),
linear-gradient(135deg, #94a3b8 50%, transparent 50%);
background-position:
calc(100% - 26px) 22px,
calc(100% - 18px) 22px;
background-size:
8px 8px,
8px 8px;
background-repeat: no-repeat;
}
.full-span {
grid-column: 1/-1;
}
.pin-location {
display: grid;
gap: 12px;
}
.pin-title {
font-size: 14px;
color: #00886b;
font-weight: 600;
}
.map-field input {
padding-right: 48px;
}
.map-field button {
position: absolute;
right: 10px;
top: 8px;
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: #00b987;
font-size: 24px;
}
.pin-location p {
margin: 0;
color: #00886b;
font-size: 13px;
}
.delivery-title {
margin-top: 4px;
}
@media (max-width: 860px) {
.checkout-form-grid,
.field-grid {
grid-template-columns: 1fr;
}
.recipient-section {
padding: 22px 16px;
}
}
/* Amazon-style product hover zoom panel */
.image-visual-wrap.amazon-zoom-ready {
overflow: visible;
}
.amazon-zoom-pane {
position: fixed;
z-index: 1000;
width: min(520px, 42vw);
height: min(520px, 72vh);
border: 1px solid #d8d8d8;
background: #fff no-repeat;
border-radius: 4px;
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
pointer-events: none;
opacity: 0;
visibility: hidden;
transition:
opacity 0.12s ease,
visibility 0.12s ease;
}
.amazon-zoom-pane.show {
opacity: 1;
visibility: visible;
}
.amazon-zoom-lens {
position: absolute;
width: 150px;
height: 150px;
border: 1px solid #d59b00;
background: rgba(255, 244, 191, 0.45);
pointer-events: none;
opacity: 0;
transform: translate(-50%, -50%);
z-index: 5;
}
.amazon-zoom-ready:hover .amazon-zoom-lens {
opacity: 1;
}
@media (max-width: 980px) {
.amazon-zoom-pane,
.amazon-zoom-lens {
display: none !important;
}
}
/* Transparent premium GoGiftings preloader */
.site-preloader {
position: fixed;
inset: 0;
z-index: 99999;
display: grid;
place-items: center;
padding: 24px;
background: transparent;
pointer-events: none;
transition:
opacity 0.42s ease,
visibility 0.42s ease,
transform 0.42s ease;
}
.site-preloader.is-hidden,
.site-preloader[hidden] {
opacity: 0;
visibility: hidden;
transform: scale(1.02);
}
.preloader-card {
width: min(260px, calc(100vw - 48px));
min-height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
border: 0;
border-radius: 34px;
background: transparent;
box-shadow: none;
position: relative;
overflow: visible;
}
.preloader-orbit {
width: 136px;
height: 136px;
display: grid;
place-items: center;
position: relative;
filter: drop-shadow(0 18px 34px rgba(123, 54, 113, 0.22));
}
.preloader-orbit::before {
content: "";
position: absolute;
inset: 5px;
border-radius: 999px;
border: 2px solid rgba(123, 54, 113, 0.14);
border-top-color: rgba(22, 199, 132, 0.85);
border-right-color: rgba(123, 54, 113, 0.5);
animation: gg-preloader-spin 1.05s linear infinite;
}
.preloader-orbit::after {
content: "";
position: absolute;
inset: 20px;
border-radius: 999px;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.92) 0%,
rgba(255, 255, 255, 0.35) 62%,
transparent 72%
);
animation: gg-preloader-breathe 1.45s ease-in-out infinite;
}
.preloader-logo {
width: 82px;
height: 82px;
border-radius: 26px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--brand), #b553a4 52%, #16c784);
box-shadow: 0 15px 38px rgba(123, 54, 113, 0.26);
position: relative;
z-index: 2;
animation: gg-preloader-pop 1.45s ease-in-out infinite;
}
.preloader-logo::before {
content: "";
position: absolute;
inset: 9px;
border: 2px solid rgba(255, 255, 255, 0.38);
border-radius: 21px;
}
.preloader-logo-mark {
color: #fff;
font-size: 46px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.08em;
text-shadow: 0 3px 12px rgba(0, 0, 0, 0.16);
}
.preloader-petal {
position: absolute;
width: 18px;
height: 18px;
border-radius: 999px;
background: #16c784;
box-shadow: 0 0 20px rgba(22, 199, 132, 0.42);
z-index: 1;
animation: gg-preloader-dot 1.45s ease-in-out infinite;
}
.petal-1 {
top: 0;
left: 59px;
}
.petal-2 {
right: 0;
top: 59px;
animation-delay: 0.12s;
}
.petal-3 {
bottom: 0;
left: 59px;
animation-delay: 0.24s;
}
.petal-4 {
left: 0;
top: 59px;
animation-delay: 0.36s;
}
.preloader-brand {
position: relative;
z-index: 2;
color: var(--brand);
font-size: 28px;
font-weight: 900;
letter-spacing: -0.04em;
text-shadow: 0 3px 18px rgba(255, 255, 255, 0.95);
}
.preloader-text {
position: relative;
z-index: 2;
color: var(--muted);
font-size: 14px;
font-weight: 700;
text-shadow: 0 3px 18px rgba(255, 255, 255, 0.95);
}
.preloader-progress {
position: relative;
z-index: 2;
width: 170px;
height: 6px;
border-radius: 999px;
background: rgba(123, 54, 113, 0.12);
overflow: hidden;
margin-top: 2px;
}
.preloader-progress span {
display: block;
width: 44%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--brand), #16c784);
animation: gg-preloader-progress 1.05s ease-in-out infinite;
}
.btn.is-loading,
button.is-loading,
a.is-loading {
pointer-events: none;
opacity: 0.78;
position: relative;
}
.btn.is-loading::after,
button.is-loading::after,
a.is-loading::after {
content: "";
width: 1em;
height: 1em;
margin-left: 0.55rem;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 999px;
display: inline-block;
vertical-align: -0.18em;
animation: gg-preloader-spin 0.7s linear infinite;
}
@keyframes gg-preloader-spin {
to {
transform: rotate(360deg);
}
}
@keyframes gg-preloader-pop {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.07);
}
}
@keyframes gg-preloader-breathe {
0%,
100% {
opacity: 0.55;
transform: scale(0.96);
}
50% {
opacity: 1;
transform: scale(1.04);
}
}
@keyframes gg-preloader-dot {
0%,
100% {
opacity: 0.45;
transform: scale(0.76);
}
50% {
opacity: 1;
transform: scale(1.16);
}
}
@keyframes gg-preloader-progress {
0% {
transform: translateX(-115%);
}
50% {
transform: translateX(70%);
}
100% {
transform: translateX(235%);
}
}
@media (prefers-reduced-motion: reduce) {
.preloader-orbit::before,
.preloader-orbit::after,
.preloader-logo,
.preloader-petal,
.preloader-progress span,
.btn.is-loading::after,
button.is-loading::after,
a.is-loading::after {
animation: none;
}
.site-preloader {
transition: none;
}
}
/* Final working fixes: transparent non-blocking preloader + Amazon zoom */
.site-preloader {
background: transparent !important;
pointer-events: none !important;
}
.site-preloader.is-hidden {
opacity: 0 !important;
visibility: hidden !important;
}
.image-visual-wrap.amazon-zoom-ready {
position: relative !important;
overflow: visible !important;
cursor: zoom-in;
}
.image-visual-wrap.amazon-zoom-active {
z-index: 20;
}
.amazon-zoom-pane {
position: fixed !important;
z-index: 9998 !important;
width: min(520px, 42vw) !important;
height: min(520px, 72vh) !important;
background-color: #fff !important;
background-repeat: no-repeat !important;
border: 1px solid rgba(15, 23, 42, 0.16) !important;
border-radius: 8px !important;
box-shadow: 0 20px 55px rgba(15, 23, 42, 0.24) !important;
pointer-events: none !important;
}
.amazon-zoom-pane.show {
opacity: 1 !important;
visibility: visible !important;
}
.amazon-zoom-lens {
position: absolute !important;
width: 150px !important;
height: 150px !important;
border: 1px solid #d59b00 !important;
background: rgba(255, 244, 191, 0.46) !important;
opacity: 0 !important;
transform: translate(-50%, -50%) !important;
pointer-events: none !important;
z-index: 30 !important;
}
.amazon-zoom-active .amazon-zoom-lens,
.amazon-zoom-ready:hover .amazon-zoom-lens {
opacity: 1 !important;
}
@media (max-width: 980px) {
.amazon-zoom-pane,
.amazon-zoom-lens {
display: none !important;
}
}
/* === FINAL STABILITY PATCH: product image, Amazon zoom, login polish === */
.product-page .main-visual,
.product-page .image-visual-wrap,
.product-page [data-gallery-main] {
inline-size: 100% !important;
}
.product-page .image-visual-wrap,
.product-page [data-gallery-main].visual-wrap {
aspect-ratio: 1 / 1 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: grid !important;
place-items: center !important;
padding: 18px !important;
overflow: visible !important;
cursor: zoom-in !important;
contain: layout paint !important;
background: linear-gradient(145deg, #fff, #fff7fb) !important;
}
.product-page .main-product-photo {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
transform: none !important;
filter: drop-shadow(0 16px 24px rgba(87, 42, 114, 0.16)) !important;
animation: none !important;
user-select: none !important;
-webkit-user-drag: none !important;
}
.product-page .visual-wrap:hover .main-product-photo,
.product-page .image-visual-wrap.is-zooming .main-product-photo,
.product-page .magnifier-active .main-product-photo {
transform: none !important;
filter: drop-shadow(0 16px 24px rgba(87, 42, 114, 0.16)) !important;
}
.product-page .gallery-thumb {
aspect-ratio: 1 / 1 !important;
height: auto !important;
min-height: 84px !important;
}
.product-page .gallery-photo,
.product-page .variant-photo {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
animation: none !important;
}
.amazon-zoom-pane {
position: fixed !important;
z-index: 9998 !important;
width: min(520px, 42vw) !important;
height: min(520px, 72vh) !important;
border: 1px solid rgba(15, 23, 42, 0.16) !important;
border-radius: 12px !important;
background-color: #fff !important;
background-repeat: no-repeat !important;
box-shadow: 0 24px 64px rgba(15, 23, 42, 0.24) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition:
opacity 0.08s linear,
visibility 0.08s linear !important;
}
.amazon-zoom-pane.show {
opacity: 1 !important;
visibility: visible !important;
display: block !important;
}
.amazon-zoom-lens {
position: absolute !important;
width: 142px !important;
height: 142px !important;
border: 1px solid #d59b00 !important;
border-radius: 8px !important;
background: rgba(255, 244, 191, 0.42) !important;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08) !important;
opacity: 0 !important;
transform: translate(-50%, -50%) !important;
pointer-events: none !important;
z-index: 40 !important;
display: block !important;
visibility: visible !important;
}
.amazon-zoom-active .amazon-zoom-lens {
opacity: 1 !important;
}
.zoom-lightbox,
.product-magnifier-lens,
.magnifier-btn,
.magnifier-toast,
.zoom-lens,
.magnifier-hint-chip {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
@media (max-width: 980px) {
.amazon-zoom-pane,
.amazon-zoom-lens {
display: none !important;
}
.product-page .image-visual-wrap,
[data-gallery-main].visual-wrap {
overflow: hidden !important;
cursor: default !important;
}
}
.login-brand-lockup {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
padding: 14px;
border: 1px solid rgba(235, 77, 151, 0.16);
border-radius: 24px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.9),
rgba(251, 245, 251, 0.82)
);
box-shadow: 0 16px 34px rgba(87, 42, 114, 0.1);
}
.login-brand-lockup .login-logo-mark {
width: 62px;
height: 62px;
border-radius: 22px;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--brand), #b553a4 52%, #16c784);
color: #fff;
font-size: 38px;
font-weight: 900;
letter-spacing: -0.08em;
box-shadow: 0 14px 34px rgba(123, 54, 113, 0.22);
position: relative;
flex: 0 0 auto;
}
.login-brand-lockup .login-logo-mark:before {
content: "";
position: absolute;
inset: 8px;
border: 2px solid rgba(255, 255, 255, 0.36);
border-radius: 17px;
}
.login-brand-lockup strong {
display: block;
color: var(--gg-velvet, #572a72);
font-size: 18px;
line-height: 1.15;
}
.login-brand-lockup span {
display: block;
color: #7a6f7d;
font-size: 13px;
font-weight: 700;
margin-top: 4px;
}
.login-card-premium {
grid-template-columns: 0.82fr 1fr !important;
}
.login-form-panel {
padding: 36px 30px !important;
}
@media (max-width: 900px) {
.login-premium-grid,
.login-card-premium {
grid-template-columns: 1fr !important;
}
.login-flower-frame {
min-height: 260px;
}
.login-form-panel {
padding: 28px 20px !important;
}
}
/* === FINAL PRODUCT IMAGE FIT PATCH: no crop, full 1:1 product display === */
.product-page .main-visual {
align-self: start !important;
}
.product-page .visual-wrap.image-visual-wrap,
.product-page [data-gallery-main].visual-wrap {
aspect-ratio: 1 / 1 !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 16px !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: visible !important;
background: #fff !important;
}
.product-page .visual-wrap.image-visual-wrap > img,
.product-page [data-gallery-main] > img,
.product-page img.main-product-photo {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
border-radius: 18px !important;
transform: none !important;
}
.product-page .gallery-thumb img,
.product-page .variant-card img,
.product-page .thumb img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
.product-page .gallery-thumb,
.product-page .variant-card .thumb {
background: #fff !important;
overflow: hidden !important;
}
.product-page .visual-wrap:before,
.product-page .visual-wrap:after,
.product-page .product-main-image:before,
.product-page .product-main-image:after {
pointer-events: none !important;
}
@media (max-width: 768px) {
.product-page .visual-wrap.image-visual-wrap,
.product-page [data-gallery-main].visual-wrap {
aspect-ratio: 1 / 1 !important;
min-height: 0 !important;
height: auto !important;
padding: 12px !important;
}
}
/* === FINAL PRODUCT IMAGE LIBRARY PATCH: premium full-fit images, no crop === */
.product-card .product-thumb,
.dynamic-card .product-thumb,
.thumb-wrap,
.gallery-thumb,
.variant-card .thumb {
background: #fff !important;
}
.product-card .product-thumb img,
.dynamic-card .product-thumb img,
.thumb-wrap img,
.product-page .gallery-thumb img,
.product-page .variant-card img,
.product-page .main-product-photo {
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
}
.product-card:hover .product-thumb img,
.dynamic-card:hover .product-thumb img,
.thumb-wrap:hover img {
transform: none !important;
filter: none !important;
}
.product-page .visual-wrap.image-visual-wrap,
.product-page [data-gallery-main].visual-wrap {
background: #fff !important;
overflow: visible !important;
}
/* === FINAL SPEED + SAFE IMAGE ZOOM PATCH (single controller, no stuck hover) === */
html {
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.amazon-zoom-pane,
.amazon-zoom-lens,
.zoom-lightbox,
.gg-image-preview-modal,
.gg-preview-backdrop,
.product-magnifier-lens,
.zoom-lens,
.magnifier-btn,
.magnifier-toast,
.magnifier-hint-chip {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.product-page .main-visual {
position: relative !important;
}
.product-page .visual-wrap.image-visual-wrap,
.product-page [data-gallery-main].visual-wrap {
position: relative !important;
width: 100% !important;
aspect-ratio: 1/1 !important;
height: auto !important;
min-height: 0 !important;
display: grid !important;
place-items: center !important;
padding: 18px !important;
overflow: hidden !important;
border-radius: 24px !important;
background: linear-gradient(145deg, #fff 0%, #fff7fb 100%) !important;
box-shadow: 0 16px 42px rgba(87, 42, 114, 0.08) !important;
contain: layout paint style !important;
cursor: zoom-in !important;
touch-action: pan-y !important;
}
.product-page .visual-wrap.image-visual-wrap > img,
.product-page [data-gallery-main] > img,
.product-page img.main-product-photo {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
display: block !important;
border-radius: 18px !important;
transform: none !important;
transition:
opacity 0.18s ease,
filter 0.18s ease !important;
will-change: auto !important;
user-select: none !important;
-webkit-user-drag: none !important;
}
.product-page .gallery-thumb,
.product-page .variant-card .thumb,
.product-card .product-thumb,
.thumb-wrap {
overflow: hidden !important;
background: #fff !important;
contain: layout paint style !important;
}
.product-page .gallery-thumb img,
.product-page .variant-card img,
.product-card .product-thumb img,
.thumb-wrap img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
transform: none !important;
transition: opacity 0.16s ease !important;
}
.product-page .gallery-thumb {
cursor: pointer !important;
transition:
border-color 0.16s ease,
box-shadow 0.16s ease,
transform 0.16s ease !important;
}
.product-page .gallery-thumb:hover {
transform: translateY(-1px) !important;
}
.gg-safe-zoom-pane {
position: fixed !important;
z-index: 99999 !important;
width: min(500px, 40vw) !important;
height: min(500px, 68vh) !important;
border: 1px solid rgba(95, 42, 94, 0.14) !important;
border-radius: 18px !important;
background: #fff no-repeat !important;
box-shadow: 0 24px 70px rgba(31, 20, 38, 0.22) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition:
opacity 0.12s ease,
visibility 0.12s ease !important;
overflow: hidden !important;
}
.gg-safe-zoom-pane.show {
opacity: 1 !important;
visibility: visible !important;
}
.gg-safe-zoom-lens {
position: absolute !important;
left: 0;
top: 0;
width: 128px !important;
height: 128px !important;
border: 1px solid rgba(164, 84, 150, 0.52) !important;
border-radius: 14px !important;
background: rgba(255, 255, 255, 0.32) !important;
box-shadow: 0 12px 28px rgba(87, 42, 114, 0.12) !important;
transform: translate(-50%, -50%) !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: 30 !important;
transition: opacity 0.08s ease !important;
}
.product-page [data-gallery-main].gg-safe-zooming .gg-safe-zoom-lens {
opacity: 1 !important;
}
@media (max-width: 980px), (prefers-reduced-motion: reduce) {
.gg-safe-zoom-pane,
.gg-safe-zoom-lens {
display: none !important;
}
.product-page .visual-wrap.image-visual-wrap,
.product-page [data-gallery-main].visual-wrap {
cursor: default !important;
}
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
}
/* === DEEP SPEED PATCH: mobile + desktop performance, CLS-safe media, smooth gallery === */
html {
scroll-behavior: smooth;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
img {
content-visibility: auto;
}
.product-page .visual-wrap.image-visual-wrap,
.product-page [data-gallery-main].visual-wrap {
aspect-ratio: 1/1 !important;
contain: layout paint style !important;
overflow: hidden !important;
transform: translateZ(0);
backface-visibility: hidden;
}
.product-page [data-gallery-main] > img,
.product-page img.main-product-photo {
object-fit: contain !important;
object-position: center !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
transition: opacity 0.16s ease !important;
will-change: auto !important;
}
.product-card,
.category-card,
.deal-card,
.addon-card,
.footer-addon,
.blog-card,
.account-detail-card {
content-visibility: auto;
contain-intrinsic-size: 1px 420px;
}
.product-card img,
.category-card img,
.deal-card img,
.addon-card img,
.footer-addon img {
image-rendering: auto;
backface-visibility: hidden;
}
@media (hover: hover) and (pointer: fine) {
.product-card,
.category-card,
.deal-card,
.btn {
transition:
transform 0.16s ease,
box-shadow 0.16s ease !important;
}
.product-card:hover,
.category-card:hover,
.deal-card:hover {
transform: translateY(-2px) !important;
}
}
@media (max-width: 980px) {
html {
scroll-behavior: auto;
}
.motion-reveal,
.hero-card,
.product-card,
.category-card,
.deal-card {
animation: none !important;
transition: none !important;
}
.gg-safe-zoom-pane,
.gg-safe-zoom-lens,
.amazon-zoom-pane,
.amazon-zoom-lens,
.zoom-lens,
.product-magnifier-lens {
display: none !important;
}
.product-page [data-gallery-main].visual-wrap {
cursor: default !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* === FINAL THEME WHATSAPP CTA PATCH: icon removed, faster + cleaner === */
.product-page .whatsapp-order-btn {
min-height: 62px !important;
justify-content: center !important;
gap: 0 !important;
padding: 14px 22px !important;
border: 0 !important;
border-radius: 18px !important;
background: linear-gradient(
135deg,
var(--brand, #f62780),
var(--brand-2, #5a1a93)
) !important;
color: #fff !important;
box-shadow: 0 16px 36px rgba(123, 54, 113, 0.24) !important;
overflow: hidden !important;
transform: translateZ(0) !important;
backface-visibility: hidden !important;
transition:
transform 0.16s ease,
box-shadow 0.16s ease,
filter 0.16s ease !important;
}
.product-page .whatsapp-order-btn:hover {
transform: translateY(-2px) translateZ(0) !important;
box-shadow: 0 22px 48px rgba(123, 54, 113, 0.32) !important;
filter: saturate(1.03) !important;
}
.product-page .whatsapp-order-btn:active {
transform: translateY(0) translateZ(0) !important;
}
.product-page .whatsapp-order-btn .wa-icon,
.product-page .whatsapp-order-btn .wa-icon img {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.product-page .whatsapp-order-btn .wa-copy {
display: grid !important;
text-align: center !important;
line-height: 1.05 !important;
position: relative !important;
z-index: 1 !important;
}
.product-page .whatsapp-order-btn .wa-copy strong {
font-size: 17px !important;
font-weight: 900 !important;
letter-spacing: 0.01em !important;
}
.product-page .whatsapp-order-btn .wa-copy em {
font-style: normal !important;
font-size: 11px !important;
font-weight: 900 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.88) !important;
margin-top: 5px !important;
}
.product-page .whatsapp-order-btn .wa-glow {
position: absolute !important;
inset: auto -18% -70% auto !important;
width: 170px !important;
height: 170px !important;
border-radius: 999px !important;
background: radial-gradient(
circle,
rgba(255, 255, 255, 0.34),
transparent 64%
) !important;
pointer-events: none !important;
opacity: 0.9 !important;
}
@media (max-width: 640px) {
.premium-product-actions {
grid-template-columns: 1fr !important;
}
.product-page .whatsapp-order-btn {
min-height: 58px !important;
}
}
/* === Final dynamic polish: promise links + variation working state + smoother media === */
.why-mini,
.stat-item,
.premium-product-promises span,
.footer-badges span {
cursor: pointer;
transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease,
background 0.18s ease;
}
.why-mini:hover,
.stat-item:hover,
.premium-product-promises span:hover,
.footer-badges span:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(246, 39, 128, 0.14);
border-color: rgba(246, 39, 128, 0.22);
}
.variant-card {
cursor: pointer;
transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
background 0.2s ease;
}
.variant-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px rgba(246, 39, 128, 0.14);
}
.variant-card.active {
border-color: #eb4d97 !important;
background: linear-gradient(135deg, #fff, #fff6fb);
box-shadow: 0 20px 45px rgba(235, 77, 151, 0.16);
}
.main-product-photo,
.premium-zoom-img,
.variant-photo,
.gallery-photo {
object-fit: contain !important;
transition:
opacity 0.16s ease,
transform 0.22s ease;
will-change: opacity;
}
.image-visual-wrap[data-gallery-main] {
contain: layout paint;
touch-action: pan-y;
background: #f8f8fb !important;
}
.gg-safe-zoom-pane,
.amazon-zoom-pane {
pointer-events: none;
will-change: background-position, opacity, transform;
transition:
opacity 0.12s ease,
transform 0.12s ease;
}
@media (max-width: 980px) {
.gg-safe-zoom-pane,
.amazon-zoom-pane,
.gg-safe-zoom-lens,
.amazon-zoom-lens {
display: none !important;
}
.image-visual-wrap[data-gallery-main] {
touch-action: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.why-mini,
.stat-item,
.variant-card,
.main-product-photo,
.premium-zoom-img {
transition: none !important;
animation: none !important;
}
}
/* === COMPLETE FINAL PATCH: premium interactions + speed-safe media === */
.product-page [data-gallery-main],
.visual-wrap.image-visual-wrap {
aspect-ratio: 1/1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
background: #f8f5f8 !important;
border-radius: 24px !important;
min-height: 0 !important;
contain: layout paint !important;
}
.product-page [data-gallery-main] img,
.main-product-photo {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
transition:
opacity 0.18s ease,
transform 0.22s ease !important;
}
.gallery-thumb img,
.variant-card img,
.product-card img {
object-fit: cover;
content-visibility: auto;
}
.variant-card {
cursor: pointer;
user-select: none;
position: relative;
transition:
transform 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease,
background 0.18s ease !important;
}
.variant-card:hover,
.variant-card:focus-visible {
transform: translateY(-2px);
box-shadow: 0 18px 42px rgba(123, 54, 113, 0.16) !important;
border-color: rgba(235, 77, 151, 0.46) !important;
outline: none;
}
.variant-card.active {
border-color: #eb4d97 !important;
background: linear-gradient(135deg, #fff, #fff7fc) !important;
box-shadow: 0 18px 42px rgba(235, 77, 151, 0.16) !important;
}
.variant-card.active:after {
content: "✓";
position: absolute;
top: 12px;
right: 12px;
width: 24px;
height: 24px;
border-radius: 50%;
display: grid;
place-items: center;
background: #f62780;
color: #fff;
font-weight: 900;
font-size: 13px;
}
.why-mini,
.stat-item,
.premium-product-promises span,
.footer-badges span,
.top-strip span[data-dynamic-link-ready="1"] {
cursor: pointer;
}
.why-mini[role="link"]:hover,
.stat-item[role="link"]:hover,
.premium-product-promises span[role="link"]:hover,
.footer-badges span[role="link"]:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(123, 54, 113, 0.15) !important;
border-color: rgba(123, 54, 113, 0.28) !important;
}
.gg-stable-zoom-pane {
position: fixed;
z-index: 9999;
pointer-events: none;
opacity: 0;
transform: translate3d(0, 8px, 0) scale(0.985);
transition:
opacity 0.14s ease,
transform 0.14s ease;
border-radius: 24px;
background-repeat: no-repeat;
background-color: #fff;
box-shadow: 0 28px 80px rgba(39, 22, 48, 0.24);
border: 1px solid rgba(123, 54, 113, 0.16);
overflow: hidden;
}
.gg-stable-zoom-pane.show {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.gg-toast {
position: fixed;
left: 50%;
bottom: 24px;
transform: translate(-50%, 18px);
opacity: 0;
z-index: 10000;
background: #2a1730;
color: #fff;
padding: 12px 18px;
border-radius: 999px;
box-shadow: 0 18px 48px rgba(42, 23, 48, 0.24);
font-weight: 800;
font-size: 14px;
transition:
opacity 0.18s ease,
transform 0.18s ease;
pointer-events: none;
}
.gg-toast.show {
opacity: 1;
transform: translate(-50%, 0);
}
.addon-product-note {
margin: 0 0 14px;
padding: 12px 14px;
border-radius: 14px;
background: #fff7fc;
border: 1px solid rgba(235, 77, 151, 0.22);
color: #44253d;
font-weight: 700;
}
@media (max-width: 899px) {
.gg-stable-zoom-pane {
display: none !important;
}
.product-page [data-gallery-main] img {
transform: none !important;
}
.variant-card:hover {
transform: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* === ULTRA RESPONSIVE FINAL PATCH === */
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
min-width: 320px;
overflow-x: hidden;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
button,
a,
[role="button"] {
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.container {
width: min(calc(100% - 32px), var(--container, 1200px));
margin-inline: auto;
}
.section {
content-visibility: auto;
contain-intrinsic-size: 1px 720px;
}
.navbar .container {
overflow-x: auto;
scrollbar-width: none;
}
.navbar .container::-webkit-scrollbar,
.gallery-rail::-webkit-scrollbar,
.variant-strip::-webkit-scrollbar {
display: none;
}
.product-page {
display: grid !important;
grid-template-columns: clamp(64px, 7vw, 88px) minmax(360px, 560px) minmax(
360px,
1fr
) !important;
gap: clamp(14px, 2vw, 28px) !important;
align-items: start !important;
}
.main-visual,
.product-summary {
min-width: 0;
border-radius: clamp(22px, 2.4vw, 34px);
overflow: hidden;
}
.visual-wrap,
[data-gallery-main] {
width: 100%;
aspect-ratio: 1/1 !important;
height: auto !important;
min-height: 0 !important;
display: grid !important;
place-items: center !important;
overflow: hidden !important;
background: radial-gradient(
circle at 50% 34%,
#fff 0,
#fffafc 50%,
#f4e8f1 100%
);
padding: clamp(10px, 2vw, 22px) !important;
}
.main-product-photo,
.gallery-photo,
.variant-photo,
.photo-fit,
.realistic-product-photo {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
}
.gallery-thumb {
aspect-ratio: 1/1 !important;
height: auto !important;
border-radius: 18px !important;
padding: 7px !important;
background: #fff !important;
}
.product-summary .title {
font-size: clamp(20px, 2.6vw, 28px) !important;
line-height: 1.02;
overflow-wrap: anywhere;
}
.variant-strip,
.variant-strip-clean {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
}
.variant-card {
min-width: 0 !important;
cursor: pointer;
border-radius: 20px !important;
}
.variant-card.active {
border-color: #f62780 !important;
box-shadow:
0 0 0 3px rgba(246, 39, 128, 0.16),
0 16px 34px rgba(69, 31, 66, 0.1) !important;
}
.cta-wide {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.cta-wide .btn,
.buy-now-theme-btn,
.whatsapp-order-btn {
min-height: 58px !important;
border-radius: 22px !important;
}
.whatsapp-order-btn img,
.whatsapp-order-btn .whatsapp-icon,
.whatsapp-order-btn svg {
display: none !important;
}
.zoom-lens,
.amazon-zoom-lens,
.amazon-zoom-pane,
.gg-safe-zoom-pane,
.magnifier-btn,
.magnifier-toast {
display: none !important;
}
.gg-stable-zoom-pane {
position: fixed;
z-index: 9999;
pointer-events: none;
border-radius: 24px;
background-repeat: no-repeat;
background-color: #fff;
box-shadow: 0 24px 75px rgba(31, 23, 41, 0.22);
border: 1px solid rgba(123, 54, 113, 0.16);
opacity: 0;
visibility: hidden;
transform: translate3d(0, 8px, 0) scale(0.985);
transition:
opacity 0.14s ease,
transform 0.14s ease,
visibility 0.14s ease;
}
.gg-stable-zoom-pane.show {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0) scale(1);
}
@media (hover: hover) and (pointer: fine) {
.product-card:hover,
.occasion-card:hover,
.category-card:hover,
.mini-card:hover,
.banner:hover,
.why-mini:hover,
.side-category-card:hover,
.addon-card:hover,
.plan-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 18px 48px rgba(87, 42, 114, 0.13) !important;
}
.product-card:hover .photo-fit,
.addon-card:hover .photo-fit {
transform: scale(1.035) !important;
}
.gallery-thumb:hover,
.variant-card:hover {
transform: translateY(-3px);
}
}
@media (max-width: 1180px) {
.product-page {
grid-template-columns: 72px minmax(340px, 1fr) !important;
}
.product-summary {
grid-column: 1/-1 !important;
}
.variant-strip,
.variant-strip-clean {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x proximity;
padding-bottom: 6px;
}
.variant-card {
flex: 0 0 230px;
scroll-snap-align: start;
}
}
@media (max-width: 900px) {
body {
padding-bottom: calc(82px + env(safe-area-inset-bottom));
}
.topbar {
display: none !important;
}
.header-row {
display: grid !important;
grid-template-columns: 1fr auto !important;
gap: 10px !important;
padding: 10px 0 !important;
}
.header-search-wrap {
grid-column: 1/-1 !important;
order: 3 !important;
display: grid !important;
grid-template-columns: minmax(110px, 0.42fr) 1fr 46px !important;
gap: 8px !important;
}
.navbar {
position: sticky !important;
top: 0 !important;
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(16px);
border-block: 1px solid rgba(234, 216, 231, 0.8);
}
.navbar .container {
gap: 9px;
padding-block: 8px;
}
.navbar a {
flex: 0 0 auto;
border-radius: 999px;
background: #fff;
border: 1px solid #ead8e7;
padding: 9px 12px;
font-size: 13px;
}
.product-page {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
}
.main-visual {
order: 1 !important;
width: 100% !important;
}
.gallery-rail {
order: 2 !important;
display: flex !important;
overflow-x: auto !important;
gap: 10px !important;
padding: 2px 2px 8px !important;
scroll-snap-type: x mandatory;
}
.gallery-thumb {
flex: 0 0 76px !important;
scroll-snap-align: start;
}
.product-summary {
order: 3 !important;
width: 100% !important;
}
.visual-wrap,
[data-gallery-main] {
aspect-ratio: 1/1 !important;
max-height: min(82vw, 520px) !important;
}
.variant-strip,
.variant-strip-clean {
display: flex !important;
overflow-x: auto !important;
gap: 10px !important;
padding-bottom: 8px !important;
scroll-snap-type: x mandatory;
}
.variant-card {
flex: 0 0 min(78vw, 280px) !important;
grid-template-columns: 88px 1fr !important;
scroll-snap-align: start;
}
.cta-wide {
position: sticky;
bottom: calc(76px + env(safe-area-inset-bottom));
z-index: 50;
background: rgba(255, 247, 252, 0.92);
backdrop-filter: blur(14px);
padding: 10px;
border-radius: 24px;
box-shadow: 0 18px 48px rgba(69, 31, 66, 0.16);
}
.gg-stable-zoom-pane {
display: none !important;
}
}
@media (max-width: 760px) {
.container {
width: min(100% - 22px, var(--container, 1200px)) !important;
}
.logo span:last-child {
font-size: 19px;
}
.header-actions .label-hide {
display: none !important;
}
.icon-btn {
width: 42px;
height: 42px;
justify-content: center;
}
.header-search-wrap {
grid-template-columns: 1fr 46px !important;
}
.location-trigger {
grid-column: 1/2 !important;
}
.ai-assistant-trigger {
grid-column: 2/3 !important;
}
.search-modern,
.search {
grid-column: 1/-1 !important;
grid-row: 2 !important;
}
.product-summary .title {
font-size: clamp(18px, 6vw, 24px) !important;
}
.variant-card {
flex-basis: min(84vw, 310px) !important;
}
.cta-wide {
grid-template-columns: 1fr !important;
}
.addon-grid,
.listing-grid,
.product-row,
.occasion-row,
.banner-row,
.feature-grid,
.plan-grid,
.tile-grid,
.mini-grid,
.side-category-grid,
.stat-strip {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 430px) {
.container {
width: min(100% - 18px, var(--container, 1200px)) !important;
}
.gallery-thumb {
flex-basis: 68px !important;
}
.visual-wrap,
[data-gallery-main] {
padding: 8px !important;
}
.variant-card {
flex-basis: 88vw !important;
min-height: 104px !important;
grid-template-columns: 76px 1fr !important;
}
.addon-grid,
.listing-grid,
.product-row,
.occasion-row,
.banner-row,
.feature-grid,
.plan-grid,
.tile-grid,
.mini-grid,
.side-category-grid,
.stat-strip {
grid-template-columns: 1fr !important;
}
.cta-wide .btn {
min-height: 54px !important;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto !important;
}
*,
*:before,
*:after {
animation: none !important;
transition: none !important;
}
.gg-stable-zoom-pane {
display: none !important;
}
}
/* =========================================================
GoGiftings Premium Smooth UI Patch
Keeps previous layout, removes mobile/product blur only,
improves smoothness and perceived speed across devices.
========================================================= */
:root {
--gg-smooth-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--gg-theme: #8f3f88;
--gg-theme-dark: #572a72;
--gg-theme-pink: #eb4d97;
--gg-soft-bg: #fff7fc;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
}
body {
overscroll-behavior-y: none;
}
img {
max-width: 100%;
height: auto;
decoding: async;
}
/* Remove the blur ghost effect without changing the existing design. */
.product-card,
.dynamic-card,
.product-thumb,
.thumb-wrap,
.product-card img,
.dynamic-card img,
.product-thumb img,
.thumb-wrap img,
.gallery-thumb img,
.visual-wrap img,
.product-main-image img,
.main-product-photo,
.photo-fit,
.realistic-product-photo,
.main-product-photo,
[data-reveal],
.reveal-on-scroll {
filter: none !important;
backdrop-filter: none !important;
}
/* Reveal becomes a crisp fade/lift instead of blurry loading. */
.reveal-on-scroll,
.reveal-on-scroll.is-visible,
[data-reveal],
[data-reveal].revealed {
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
/* Product cards: premium touch, lighter paint cost, no fuzzy image state. */
.product-card,
.dynamic-card,
.addon-card,
.category-card,
.occasion-card,
.blog-card {
transform: translateZ(0);
backface-visibility: hidden;
contain: layout paint;
transition:
transform 0.32s var(--gg-smooth-ease),
box-shadow 0.32s ease,
border-color 0.32s ease !important;
}
@media (hover: hover) and (pointer: fine) {
.product-card:hover,
.dynamic-card:hover,
.addon-card:hover,
.category-card:hover,
.occasion-card:hover {
transform: translateY(-6px) !important;
box-shadow: 0 22px 56px rgba(87, 42, 114, 0.14) !important;
}
.product-card:hover img,
.dynamic-card:hover img,
.addon-card:hover img,
.category-card:hover img {
transform: scale(1.045) !important;
filter: none !important;
}
}
@media (hover: none), (pointer: coarse) {
.product-card,
.dynamic-card,
.addon-card,
.category-card,
.occasion-card,
.blog-card,
.product-card img,
.dynamic-card img,
.addon-card img,
.category-card img,
.visual-wrap img {
transform: none !important;
filter: none !important;
transition:
box-shadow 0.22s ease,
border-color 0.22s ease !important;
}
.amazon-zoom-pane,
.amazon-zoom-lens,
.product-magnifier-lens,
.zoom-lens,
.magnifier-btn,
.magnifier-hint-chip {
display: none !important;
}
}
/* Image quality and stable 1:1 product media. */
.product-thumb,
.thumb-wrap,
.visual-wrap,
.product-main-image {
background: linear-gradient(145deg, #fff, #fbf5fb) !important;
}
.product-thumb img,
.thumb-wrap img,
.product-card img,
.dynamic-card img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
image-rendering: auto !important;
}
.visual-wrap img,
.product-main-image img,
.main-product-photo {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
}
/* Premium buttons, less heavy glow and smoother touch feedback. */
.btn,
.quick-add,
.product-summary .btn-primary,
.cta-wide .btn,
.mobile-bottom-nav a {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.btn:active,
.quick-add:active,
.mobile-bottom-nav a:active {
transform: scale(0.985) !important;
}
.product-summary .btn-primary,
.quick-add {
background: linear-gradient(
135deg,
var(--gg-theme),
var(--gg-theme-dark)
) !important;
box-shadow: 0 14px 34px rgba(246, 39, 128, 0.22) !important;
}
.product-summary .btn-primary:hover,
.quick-add:hover {
box-shadow: 0 18px 44px rgba(246, 39, 128, 0.26) !important;
}
/* Mobile polish: keep previous structure but make it breathe. */
@media (max-width: 768px) {
body {
background: #eef4fb;
}
.page-pad {
padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}
.listing-grid,
.product-row,
.addon-grid,
.occasion-row,
.banner-row,
.feature-grid,
.plan-grid,
.tile-grid,
.mini-grid {
gap: 12px !important;
}
.product-card,
.dynamic-card,
.addon-card {
border-radius: 18px !important;
overflow: hidden !important;
box-shadow: 0 12px 32px rgba(87, 42, 114, 0.1) !important;
}
.product-thumb,
.thumb-wrap {
aspect-ratio: 1/1 !important;
min-height: 0 !important;
border-radius: 16px !important;
}
.product-card h4,
.dynamic-card h4 {
font-size: 13px !important;
line-height: 1.25 !important;
}
.quick-add {
min-height: 42px !important;
border-radius: 14px !important;
font-size: 13px !important;
}
.mobile-bottom-nav {
backdrop-filter: none !important;
background: rgba(255, 255, 255, 0.96) !important;
box-shadow: 0 -12px 34px rgba(87, 42, 114, 0.14) !important;
}
}
/* Respect reduced motion and make low-end phones feel quick. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
/* FINAL MOBILE PRODUCT BLUR KILL-SWITCH */
@media (max-width: 980px) {
.product-card,
.dynamic-card,
.addon-card,
.deal-card,
.category-card,
.occasion-card,
.mini-card,
.banner,
.more-products,
.product-row,
.listing-grid,
.addon-grid,
.thumb-wrap,
.product-thumb,
.product-card *,
.dynamic-card *,
.addon-card *,
.deal-card *,
.category-card *,
.occasion-card *,
.mini-card *,
.banner *,
.more-products *,
.product-row *,
.listing-grid *,
.addon-grid * {
filter: none !important;
-webkit-filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
text-shadow: none !important;
}
[data-reveal],
[data-reveal].revealed,
.reveal-on-scroll,
.reveal-on-scroll.is-visible,
.motion-reveal,
.is-loading,
.loading,
.lazy,
.lazyload,
.lazyloaded,
.blur,
.blurred,
.image-blur,
.skeleton {
filter: none !important;
-webkit-filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
opacity: 1 !important;
transform: none !important;
animation: none !important;
}
.product-card img,
.dynamic-card img,
.addon-card img,
.deal-card img,
.category-card img,
.product-thumb img,
.thumb-wrap img,
img.photo-fit,
img.realistic-product-photo {
filter: none !important;
-webkit-filter: none !important;
opacity: 1 !important;
transform: none !important;
image-rendering: auto !important;
object-fit: contain !important;
object-position: center !important;
}
.product-card:before,
.product-card:after,
.dynamic-card:before,
.dynamic-card:after,
.addon-card:before,
.addon-card:after,
.deal-card:before,
.deal-card:after,
.thumb-wrap:before,
.thumb-wrap:after,
.product-thumb:before,
.product-thumb:after {
filter: none !important;
-webkit-filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
}
.product-card img,
.dynamic-card img,
.addon-card img,
.deal-card img,
.category-card img,
.product-thumb img,
.thumb-wrap img {
filter: none !important;
-webkit-filter: none !important;
}
/* === Add-on page final alignment with Buy Now CTA === */
.sticky-checkout {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 18px !important;
width: 100% !important;
max-width: 1180px !important;
margin: 28px auto 8px !important;
padding: 14px !important;
border: 1px solid rgba(246, 39, 128, 0.14) !important;
border-radius: 28px !important;
background: rgba(255, 255, 255, 0.92) !important;
box-shadow: 0 22px 60px rgba(86, 35, 92, 0.14) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
.sticky-checkout .base-item {
flex: 1 1 240px !important;
margin: 0 !important;
padding: 12px 16px !important;
border-radius: 20px !important;
background: linear-gradient(135deg, #fff8fc, #f7eef6) !important;
color: #231629 !important;
font-weight: 800 !important;
line-height: 1.35 !important;
}
.sticky-checkout > div:last-child {
flex: 0 1 520px !important;
display: grid !important;
grid-template-columns: minmax(150px, 0.8fr) minmax(210px, 1fr) !important;
gap: 12px !important;
align-items: stretch !important;
}
.sticky-checkout .btn {
min-width: 0 !important;
width: 100% !important;
min-height: 64px !important;
border-radius: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: normal !important;
line-height: 1.1 !important;
}
.sticky-checkout .btn-primary {
background: linear-gradient(
135deg,
#f62780 0%,
#5a1a93 52%,
#5a1a93 100%
) !important;
color: #fff !important;
box-shadow: 0 18px 44px rgba(90, 26, 147, 0.26) !important;
font-size: 18px !important;
font-weight: 900 !important;
letter-spacing: 0.01em !important;
}
.sticky-checkout .btn-primary span {
display: block !important;
margin-top: 4px !important;
color: rgba(255, 255, 255, 0.86) !important;
}
.addon-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.addon-card .product-thumb {
width: 100% !important;
aspect-ratio: 1/1 !important;
min-height: 0 !important;
}
.addon-card h4 {
min-height: 48px !important;
}
.addon-card .qty {
margin-top: auto !important;
display: grid !important;
grid-template-columns: 44px 1fr 44px !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
}
.addon-card .qty button {
width: 44px !important;
height: 44px !important;
border: 0 !important;
border-radius: 14px !important;
background: linear-gradient(135deg, #fff, #f6e9f4) !important;
color: #5a1a93 !important;
font-size: 22px !important;
font-weight: 900 !important;
box-shadow: 0 8px 20px rgba(90, 26, 147, 0.12) !important;
cursor: pointer !important;
}
.addon-card .qty span {
height: 44px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 14px !important;
background: #fff !important;
border: 1px solid rgba(246, 39, 128, 0.16) !important;
font-weight: 900 !important;
color: #231629 !important;
}
.addon-card.is-selected {
border-color: #f62780 !important;
box-shadow: 0 18px 50px rgba(90, 26, 147, 0.18) !important;
}
@media (max-width: 760px) {
.sticky-checkout {
position: sticky !important;
bottom: calc(74px + env(safe-area-inset-bottom)) !important;
z-index: 45 !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
padding: 10px !important;
margin: 18px auto 0 !important;
border-radius: 24px !important;
}
.sticky-checkout .base-item {
padding: 10px 12px !important;
font-size: 14px !important;
}
.sticky-checkout > div:last-child {
grid-template-columns: 1fr !important;
gap: 9px !important;
flex: auto !important;
}
.sticky-checkout .btn {
min-height: 52px !important;
border-radius: 18px !important;
font-size: 15px !important;
}
.sticky-checkout .btn-primary {
font-size: 16px !important;
}
.addon-card h4 {
min-height: auto !important;
}
}
/* FINAL BUY NOW / ADD-ON FLOW ALIGNMENT */
.buy-now-theme-btn[data-addon-open] {
cursor: pointer !important;
}
.buy-now-theme-btn[data-addon-open],
.add-cart-premium-btn {
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}
@media (max-width: 760px) {
.premium-product-actions {
grid-template-columns: 1fr !important;
align-items: stretch !important;
}
.premium-product-actions .buy-now-theme-btn,
.premium-product-actions .whatsapp-order-btn,
.add-cart-premium-btn {
width: 100% !important;
min-height: 56px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
}
/* === FINAL BRAND GRADIENT + ADD TO CART OVERRIDE === */
:root {
--brand: #f62780 !important;
--brand-2: #5a1a93 !important;
--gg-theme: #f62780 !important;
--gg-theme-dark: #5a1a93 !important;
--brand-gradient: linear-gradient(
135deg,
#f62780 0%,
#5a1a93 100%
) !important;
}
.btn-primary,
.btn.btn-primary,
a.btn-primary,
button.btn-primary,
.add-cart-premium-btn,
.buy-now-theme-btn,
.final-premium-cta,
.quick-add,
.product-card .quick-add,
.dynamic-card .quick-add,
button.quick-add,
button[data-addon-open],
a[data-addon-open].btn-primary,
[data-addon-open].btn-primary,
[data-buy-now],
.sticky-checkout .btn-primary,
.addon-panel .btn-primary,
.location-actions .btn-primary,
.mobile-filter-toggle,
[data-addon-apply] {
background: linear-gradient(135deg, #f62780 0%, #5a1a93 100%) !important;
background-image: linear-gradient(
135deg,
#f62780 0%,
#5a1a93 100%
) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 16px 36px rgba(246, 39, 128, 0.3) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
.add-cart-premium-btn:hover,
.buy-now-theme-btn:hover,
.final-premium-cta:hover,
.quick-add:hover,
.product-card .quick-add:hover,
.dynamic-card .quick-add:hover,
button.quick-add:hover,
button[data-addon-open]:hover,
a[data-addon-open].btn-primary:hover,
[data-addon-open].btn-primary:hover,
[data-buy-now]:hover,
.sticky-checkout .btn-primary:hover,
.addon-panel .btn-primary:hover,
.location-actions .btn-primary:hover,
.mobile-filter-toggle:hover,
[data-addon-apply]:hover {
background: linear-gradient(135deg, #5a1a93 0%, #f62780 100%) !important;
background-image: linear-gradient(
135deg,
#5a1a93 0%,
#f62780 100%
) !important;
color: #fff !important;
box-shadow: 0 20px 46px rgba(90, 26, 147, 0.32) !important;
}
.quick-add.added {
background: linear-gradient(135deg, #f62780 0%, #5a1a93 100%) !important;
background-image: linear-gradient(
135deg,
#f62780 0%,
#5a1a93 100%
) !important;
}
.add-cart-premium-btn span,
.buy-now-theme-btn span,
.buy-now-theme-btn strong,
.buy-now-theme-btn em,
.final-premium-cta span,
.final-premium-cta strong,
.final-premium-cta em {
color: #fff !important;
}
.card,
.panel,
.soft-panel,
.hero-card,
.product-card,
.dynamic-card,
.addon-card,
.category-card,
.occasion-card,
.mini-card,
.checkout-card,
.summary-card,
.account-detail-card,
.gg-table-card,
.variant-card,
.banner {
background: rgba(255, 255, 255, 0.74) !important;
border: 1px solid rgba(255, 255, 255, 0.44) !important;
box-shadow: 0 18px 48px rgba(90, 26, 147, 0.13) !important;
backdrop-filter: blur(16px) saturate(145%) !important;
-webkit-backdrop-filter: blur(16px) saturate(145%) !important;
}
/* === Client request patch: subscription enquiry/cart, influencer image alignment, glass logo === */
.logo,
.preloader-logo,
.login-brand-lockup .login-logo-mark {
position: relative;
}
.logo-mark,
.preloader-logo-mark,
.login-brand-lockup .login-logo-mark {
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.68),
rgba(255, 238, 248, 0.28) 38%,
rgba(246, 39, 128, 0.58) 72%,
rgba(90, 26, 147, 0.68)
) !important;
border: 1px solid rgba(255, 255, 255, 0.68) !important;
box-shadow:
0 12px 34px rgba(90, 26, 147, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.82),
inset 0 -10px 24px rgba(246, 39, 128, 0.18) !important;
backdrop-filter: blur(14px) saturate(1.25) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.25) !important;
}
.logo-mark:after,
.preloader-logo-mark:after,
.login-brand-lockup .login-logo-mark:after {
content: "";
position: absolute;
inset: 6px 8px auto 8px;
height: 36%;
border-radius: 999px;
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.82),
rgba(255, 255, 255, 0.12)
);
pointer-events: none;
}
.subscription-top-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 14px 0 4px;
}
.subscription-top-actions .btn {
min-width: 150px;
border-radius: 999px;
}
.sub-product {
display: flex;
flex-direction: column;
gap: 8px;
}
.sub-product p {
flex: 1;
}
.sub-product-actions {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: auto;
}
.sub-product-actions .btn {
min-height: 42px;
padding: 10px 12px;
border-radius: 14px;
font-size: 13px;
font-weight: 900;
}
.sub-add-cart {
box-shadow: 0 12px 24px rgba(246, 39, 128, 0.18);
}
.sub-enquiry {
background: rgba(255, 255, 255, 0.76) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-color: rgba(236, 191, 212, 0.9) !important;
color: #5a1a93 !important;
}
.influencer-aligned-page {
grid-template-columns: 1.05fr 0.95fr !important;
align-items: start;
}
.influencer-aligned-page .panel {
height: 100%;
}
.influencer-aligned-page .feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.influencer-aligned-page img,
.influencer-aligned-page .blog-image img,
.influencer-aligned-page .addon-card img {
width: 100% !important;
aspect-ratio: 1/1 !important;
height: auto !important;
max-height: 240px !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 18px !important;
}
.influencer-aligned-page .feature-card {
min-height: 132px;
}
@media (max-width: 900px) {
.influencer-aligned-page {
grid-template-columns: 1fr !important;
}
.subscription-top-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.sub-product-actions {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 520px) {
.subscription-top-actions,
.sub-product-actions {
grid-template-columns: 1fr;
}
.influencer-aligned-page .feature-grid {
grid-template-columns: 1fr !important;
}
}
/* === Final client patch: influencer visual + subscription buy flow === */
.influencer-hero-shot {
margin: 18px 0 18px;
border-radius: 28px;
overflow: hidden;
border: 1px solid rgba(236, 191, 212, 0.72);
background: rgba(255, 255, 255, 0.68);
box-shadow: 0 24px 58px rgba(90, 26, 147, 0.13);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.influencer-hero-shot img {
display: block;
width: 100% !important;
height: clamp(210px, 28vw, 330px) !important;
max-height: 330px !important;
aspect-ratio: 16/9 !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 0 !important;
}
.influencer-aligned-page .feature-grid {
margin-top: 14px;
}
.influencer-aligned-page .panel {
overflow: hidden;
}
.influencer-aligned-page .blog-image img {
object-fit: cover !important;
max-height: none !important;
}
.sub-product-actions {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.sub-product-actions .sub-enquiry {
grid-column: 1/-1;
}
.sub-buy-now {
background: linear-gradient(135deg, #5a1a93 0%, #f62780 100%) !important;
color: #fff !important;
}
.subscription-flow-panel {
margin: 18px 0;
padding: 18px;
border-radius: 26px;
border: 1px solid rgba(236, 191, 212, 0.78);
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.88),
rgba(255, 238, 248, 0.68)
);
box-shadow: 0 22px 55px rgba(90, 26, 147, 0.12);
}
.subscription-flow-panel h3 {
margin: 0 0 8px;
font-size: 22px;
}
.subscription-flow-panel p {
margin: 0 0 12px;
color: #756e79;
}
.subscription-flow-options {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.subscription-flow-options button {
border: 1px solid rgba(236, 191, 212, 0.86);
border-radius: 18px;
background: #fff;
padding: 12px 10px;
font-weight: 900;
color: #5a1a93;
cursor: pointer;
}
.subscription-flow-options button.active {
background: linear-gradient(135deg, #f62780, #5a1a93);
color: #fff;
border-color: transparent;
box-shadow: 0 14px 30px rgba(246, 39, 128, 0.2);
}
.subscription-mode .title:after {
content: " Subscription";
display: inline-block;
margin-left: 8px;
font-size: 0.45em;
vertical-align: middle;
padding: 7px 12px;
border-radius: 999px;
background: rgba(246, 39, 128, 0.1);
color: #f62780;
}
@media (max-width: 760px) {
.influencer-hero-shot img {
height: min(62vw, 280px) !important;
}
.subscription-flow-options {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sub-product-actions {
grid-template-columns: 1fr !important;
}
.sub-product-actions .sub-enquiry {
grid-column: auto;
}
}
/* === Production final patch: reference-style subscription, influencer image, glass logo === */
.logo {
position: relative;
isolation: isolate;
border: 1px solid rgba(255, 255, 255, 0.54) !important;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.78),
rgba(255, 255, 255, 0.38)
) !important;
box-shadow:
0 18px 40px rgba(90, 26, 147, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
backdrop-filter: blur(18px) saturate(145%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
border-radius: 22px !important;
padding: 8px 12px !important;
}
.logo:before {
content: "";
position: absolute;
inset: 1px;
border-radius: 20px;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.55),
rgba(246, 39, 128, 0.08)
);
z-index: -1;
}
.logo-mark {
box-shadow:
0 10px 24px rgba(246, 39, 128, 0.22),
inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}
.influencer-aligned-page {
grid-template-columns: 1.05fr 0.95fr !important;
}
.influencer-side-visual {
margin: 0 0 24px;
border-radius: 28px;
overflow: hidden;
border: 1px solid rgba(236, 191, 212, 0.78);
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 22px 58px rgba(90, 26, 147, 0.14);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.influencer-side-visual img {
display: block;
width: 100% !important;
height: clamp(260px, 31vw, 420px) !important;
max-height: none !important;
aspect-ratio: 16/10 !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 0 !important;
}
.influencer-hero-shot img {
object-fit: cover !important;
object-position: center !important;
}
.influencer-apply-panel {
padding: 34px !important;
}
.subscription-clean-page {
background: #f8f6f3;
}
.glass-strip {
border: 1px solid rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.72);
box-shadow: 0 18px 50px rgba(28, 24, 34, 0.06);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-radius: 10px;
}
.subscription-perks {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
padding: 18px 24px;
margin: 0 0 42px;
}
.subscription-perks div {
display: flex;
align-items: center;
gap: 12px;
font-weight: 800;
color: #035765;
}
.subscription-perks span {
font-size: 22px;
}
.subscription-section-title {
margin-bottom: 28px;
}
.subscription-section-title h1,
.subscription-section-title h2 {
font-family: Inter, "Segoe UI", system-ui, sans-serif;
color: #1f1020;
font-size: clamp(34px, 4vw, 52px);
line-height: 1.05;
margin: 12px 0;
}
.subscription-section-title p {
max-width: 760px;
color: #5e6970;
font-size: 16px;
}
.subscription-section-title.compact {
margin-top: 46px;
}
.subscription-reference-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.sub-ref-card {
overflow: hidden;
border-radius: 14px;
background: #fff;
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(8, 86, 98, 0.08);
}
.sub-ref-image {
display: grid;
place-items: center;
height: 320px;
background: linear-gradient(135deg, #f1e6db, #fff7f1);
overflow: hidden;
}
.sub-ref-image .prod-svg {
width: 100%;
height: 100%;
transform: scale(1.12);
}
.sub-ref-body {
padding: 20px 22px 24px;
}
.sub-ref-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.sub-ref-head h3 {
font-family: Inter, "Segoe UI", system-ui, sans-serif;
color: #1f1020;
font-size: 24px;
margin: 0;
}
.sub-ref-head p {
margin: 0;
text-align: right;
font-size: 11px;
color: #7c8b91;
}
.sub-ref-head strong {
display: block;
color: #1f1020;
font-size: 21px;
line-height: 1;
}
.sub-ref-head small {
display: block;
font-weight: 800;
color: #1f1020;
}
.sub-ref-body > p {
min-height: 72px;
color: #1f1020;
line-height: 1.6;
}
.sub-ref-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.sub-ref-actions .btn {
border-radius: 999px;
min-height: 46px;
font-size: 12px;
font-weight: 900;
}
.sub-ref-actions .sub-buy-now {
grid-column: 1/-1;
}
.subscription-how {
margin: 52px 0 24px;
padding: 26px;
}
.subscription-how h2 {
font-family: Inter, "Segoe UI", system-ui, sans-serif;
color: #1f1020;
font-size: 40px;
margin: 0 0 22px;
}
.how-mini-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.how-mini-grid > div {
display: grid;
grid-template-columns: 54px 1fr;
gap: 12px;
align-items: start;
}
.how-mini-grid span {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 50%;
background: #eff5f2;
}
.how-mini-grid strong {
color: #1f1020;
}
.how-mini-grid p {
grid-column: 2;
color: #1f1020;
margin: 0;
line-height: 1.5;
}
.upgraded-sub-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.upgraded-sub-grid .sub-product {
border-radius: 18px;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 14px 35px rgba(31, 23, 41, 0.08);
border: 1px solid rgba(255, 255, 255, 0.72);
padding: 16px;
}
.upgraded-sub-grid .product-thumb {
width: 100%;
height: 160px;
border-radius: 16px;
overflow: hidden;
}
.upgraded-sub-grid .sub-product h4 {
font-family: Inter, "Segoe UI", system-ui, sans-serif;
color: #1f1020;
font-size: 22px;
margin: 10px 0 0;
}
.upgraded-sub-grid .sub-product p {
color: #53636a !important;
font-size: 14px !important;
line-height: 1.45;
}
.sub-product-actions .btn {
border-radius: 999px !important;
}
.sub-buy-now {
background: #f62780 !important;
color: #fff !important;
}
.sub-enquiry {
background: rgba(255, 255, 255, 0.75) !important;
color: #f62780 !important;
border: 1px solid rgba(7, 90, 99, 0.28) !important;
}
.subscription-flow-panel {
background: #f8f6f3 !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.subscription-configurator {
display: grid;
gap: 26px;
}
.subscription-configurator h3 {
font-family: Inter, "Segoe UI", system-ui, sans-serif;
color: #1f1020;
font-size: 30px;
margin: 0;
}
.subscription-option-list {
display: grid;
gap: 10px;
}
.subscription-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 46px;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid rgba(7, 90, 99, 0.18);
background: #fff;
color: #1f1020;
cursor: pointer;
text-align: left;
}
.subscription-option.active {
border-color: #f62780;
box-shadow: 0 0 0 1px #f62780 inset;
}
.subscription-option small {
color: #6f8388;
font-weight: 800;
}
.subscription-summary-card {
border-radius: 14px;
background: #fff;
padding: 18px;
border: 1px solid rgba(7, 90, 99, 0.1);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
}
.subscription-summary-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #eef1ef;
}
.subscription-summary-row:last-child {
border-bottom: 0;
font-weight: 900;
color: #1f1020;
}
.subscription-mode .add-cart-premium-btn {
display: inline-flex !important;
margin-bottom: 14px !important;
}
.subscription-mode .premium-product-actions {
grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 980px) {
.subscription-perks,
.subscription-reference-grid,
.how-mini-grid {
grid-template-columns: 1fr;
}
.upgraded-sub-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.influencer-side-visual img {
height: min(62vw, 360px) !important;
}
}
@media (max-width: 560px) {
.upgraded-sub-grid {
grid-template-columns: 1fr;
}
.sub-ref-actions {
grid-template-columns: 1fr;
}
.subscription-perks {
padding: 14px;
}
.how-mini-grid > div {
grid-template-columns: 44px 1fr;
}
.subscription-mode .premium-product-actions {
grid-template-columns: 1fr !important;
}
}
/* === Proper Subscription Drawer Flow - GoGiftings === */
.sub-ref-actions button,
.sub-product-actions button {
border: 0;
cursor: pointer;
font-family: inherit;
}
.subscription-drawer {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
}
.subscription-drawer[aria-hidden="false"] {
pointer-events: auto;
}
.subscription-drawer-backdrop {
position: absolute;
inset: 0;
background: rgba(16, 34, 38, 0.36);
backdrop-filter: blur(8px);
border: 0;
opacity: 0;
transition: 0.25s ease;
}
.subscription-drawer[aria-hidden="false"] .subscription-drawer-backdrop {
opacity: 1;
}
.subscription-drawer-panel {
position: absolute;
right: 0;
top: 0;
width: min(920px, 96vw);
height: 100%;
overflow: auto;
background: linear-gradient(
145deg,
rgba(255, 255, 255, 0.94),
rgba(253, 244, 250, 0.9)
);
box-shadow: -30px 0 80px rgba(0, 0, 0, 0.18);
transform: translateX(104%);
transition: 0.3s cubic-bezier(0.22, 0.8, 0.28, 1);
padding: 32px;
border-left: 1px solid rgba(255, 255, 255, 0.65);
backdrop-filter: blur(22px);
}
.subscription-drawer[aria-hidden="false"] .subscription-drawer-panel {
transform: translateX(0);
}
.subscription-drawer-head {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
margin-bottom: 24px;
}
.subscription-drawer-head h2 {
margin: 12px 0 6px;
color: #1f1020;
font-size: clamp(26px, 3vw, 40px);
line-height: 1;
}
.subscription-drawer-head p {
margin: 0;
color: #6f6574;
}
.subscription-drawer-layout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) 340px;
gap: 24px;
align-items: start;
}
.subscription-config-form {
display: grid;
gap: 22px;
}
.sub-config-section {
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(0, 87, 102, 0.12);
border-radius: 24px;
padding: 18px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}
.sub-config-section h3 {
margin: 0 0 14px;
color: #1f1020;
font-size: 20px;
}
.sub-choice {
min-height: 54px;
margin: 10px 0;
padding: 14px 16px;
border-radius: 14px;
border: 1px solid rgba(0, 87, 102, 0.12);
background: #fff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
cursor: pointer;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
transition: 0.2s ease;
}
.sub-choice:hover,
.sub-choice.active {
border-color: #1f1020;
box-shadow: 0 12px 24px rgba(0, 87, 102, 0.12);
}
.sub-choice input[type="radio"] {
accent-color: #1f1020;
}
.sub-choice span {
font-weight: 800;
color: #073f49;
}
.sub-choice small {
color: #a9746e;
background: #f7e8e4;
border-radius: 999px;
padding: 4px 9px;
font-weight: 800;
}
.custom-date-choice input[type="date"] {
border: 0;
background: #f4f7f7;
border-radius: 10px;
padding: 9px;
color: #1f1020;
}
.sub-note {
font-size: 13px;
color: #65757b;
margin: 12px 4px 0;
}
.sub-drawer-summary-card {
position: sticky;
top: 18px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 28px;
padding: 18px;
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(18px);
}
.sub-summary-image {
height: 190px;
border-radius: 20px;
overflow: hidden;
background: #f9eee8;
margin-bottom: 15px;
}
.sub-summary-image .prod-svg {
width: 100%;
height: 100%;
border-radius: 0;
}
.sub-drawer-summary-card h3 {
margin: 0 0 8px;
color: #1f1020;
font-size: 22px;
}
.sub-drawer-summary-card p {
margin: 0 0 15px;
color: #6f6574;
}
.sub-summary-box {
background: #fff;
border-radius: 18px;
padding: 14px;
margin-bottom: 14px;
}
.sub-summary-box strong {
display: block;
margin-bottom: 10px;
color: #1f1020;
}
.sub-summary-box div {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid #eef1f1;
font-size: 13px;
}
.sub-summary-box div:last-child {
border-bottom: 0;
}
.sub-summary-box span {
color: #6f6574;
}
.sub-summary-box b {
color: #073f49;
text-align: right;
}
.sub-summary-box .total {
font-size: 16px;
}
.sub-summary-box .total b {
color: #1f1020;
font-size: 18px;
}
.sub-drawer-primary,
.sub-drawer-secondary {
width: 100%;
justify-content: center;
margin-top: 10px;
}
.sub-drawer-whatsapp {
display: block;
text-align: center;
margin-top: 12px;
color: #1f1020;
font-weight: 900;
text-decoration: none;
}
.subscription-toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translateX(-50%) translateY(20px);
background: #f62780;
color: #fff;
padding: 13px 18px;
border-radius: 999px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2);
z-index: 10001;
opacity: 0;
transition: 0.25s ease;
}
.subscription-toast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
body.sub-drawer-locked {
overflow: hidden;
}
@media (max-width: 760px) {
.subscription-drawer-panel {
width: 100vw;
padding: 18px;
}
.subscription-drawer-layout {
grid-template-columns: 1fr;
}
.sub-drawer-summary-card {
position: relative;
top: auto;
}
.subscription-drawer-head {
align-items: flex-start;
}
.sub-choice {
align-items: flex-start;
flex-direction: column;
}
.custom-date-choice input[type="date"] {
width: 100%;
}
}
/* === Client final correction: GoGiftings subscription drawer logic + influencer polish === */
.subscription-clean-page {
background: linear-gradient(180deg, #fbf8f5 0%, #f7f2ee 100%) !important;
}
.subscription-reference-grid {
align-items: stretch !important;
}
.sub-ref-card {
display: flex !important;
flex-direction: column !important;
border-radius: 22px !important;
overflow: hidden !important;
background: rgba(255, 255, 255, 0.84) !important;
border: 1px solid rgba(7, 90, 99, 0.1) !important;
box-shadow: 0 18px 44px rgba(4, 84, 99, 0.1) !important;
}
.sub-ref-image {
height: 300px !important;
background: linear-gradient(135deg, #fff7f0, #efe2d8) !important;
}
.sub-ref-body {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
}
.sub-ref-actions,
.sub-product-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
margin-top: auto !important;
}
.sub-ref-actions .btn,
.sub-product-actions .btn {
min-height: 44px !important;
border-radius: 999px !important;
font-weight: 900 !important;
font-size: 12px !important;
letter-spacing: 0.01em !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
cursor: pointer !important;
}
.sub-more-details,
.sub-ref-actions .btn-secondary,
.sub-product-actions .btn-secondary {
background: #fff !important;
color: #f62780 !important;
border: 1.5px solid #f62780 !important;
box-shadow: none !important;
}
.sub-buy-now,
.sub-ref-actions .btn-primary,
.sub-product-actions .btn-primary {
background: #f62780 !important;
color: #fff !important;
border: 1.5px solid #f62780 !important;
box-shadow: 0 16px 30px rgba(7, 90, 99, 0.18) !important;
}
.sub-add-cart,
[data-subscription-add-cart] {
display: none !important;
}
.sub-enquiry {
grid-column: 1/-1 !important;
min-height: 40px !important;
background: rgba(255, 255, 255, 0.68) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
}
.subscription-drawer[aria-hidden="true"] {
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
.subscription-drawer[aria-hidden="false"] {
opacity: 1 !important;
pointer-events: auto !important;
visibility: visible !important;
}
.subscription-drawer {
position: fixed !important;
inset: 0 !important;
z-index: 9999 !important;
transition: 0.24s ease !important;
}
.subscription-drawer-backdrop {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
border: 0 !important;
background: rgba(18, 26, 30, 0.42) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
cursor: pointer !important;
}
.subscription-drawer-panel {
position: absolute !important;
left: 50% !important;
top: 50% !important;
right: auto !important;
bottom: auto !important;
transform: translate(-50%, -50%) scale(0.98) !important;
width: min(1120px, 94vw) !important;
max-height: 92vh !important;
overflow: auto !important;
border-radius: 28px !important;
background: #f8f6f3 !important;
border: 1px solid rgba(255, 255, 255, 0.78) !important;
box-shadow: 0 35px 90px rgba(0, 0, 0, 0.28) !important;
padding: 0 !important;
color: #1f1020 !important;
}
.subscription-drawer[aria-hidden="false"] .subscription-drawer-panel {
transform: translate(-50%, -50%) scale(1) !important;
}
.subscription-drawer-head {
position: sticky !important;
top: 0 !important;
z-index: 3 !important;
display: flex !important;
justify-content: space-between !important;
gap: 20px !important;
padding: 28px 34px 18px !important;
background: linear-gradient(
180deg,
rgba(248, 246, 243, 0.98),
rgba(248, 246, 243, 0.88)
) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border-bottom: 1px solid rgba(7, 90, 99, 0.08) !important;
}
.subscription-drawer-head h2 {
font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
color: #1f1020 !important;
font-size: clamp(28px, 3.5vw, 46px) !important;
line-height: 1.05 !important;
margin: 8px 0 4px !important;
}
.subscription-drawer-head p {
margin: 0 !important;
color: #5d6b70 !important;
}
.close-x {
width: 42px !important;
height: 42px !important;
border-radius: 50% !important;
border: 1px solid rgba(7, 90, 99, 0.18) !important;
background: #fff !important;
color: #f62780 !important;
font-size: 28px !important;
line-height: 1 !important;
cursor: pointer !important;
}
.subscription-drawer-layout {
display: grid !important;
grid-template-columns: minmax(0, 1.22fr) 380px !important;
gap: 32px !important;
padding: 24px 34px 34px !important;
align-items: start !important;
}
.subscription-config-form {
display: grid !important;
gap: 28px !important;
}
.sub-config-section h3 {
font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
color: #1f1020 !important;
font-size: 25px !important;
margin: 0 0 14px !important;
}
.sub-choice {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
min-height: 48px !important;
margin: 0 0 10px !important;
padding: 12px 16px !important;
border-radius: 10px !important;
background: #fff !important;
border: 1px solid rgba(7, 90, 99, 0.14) !important;
box-shadow: 0 8px 20px rgba(22, 20, 18, 0.035) !important;
color: #1f1020 !important;
cursor: pointer !important;
}
.sub-choice.active {
border-color: #f62780 !important;
box-shadow:
0 0 0 1px #f62780 inset,
0 12px 24px rgba(7, 90, 99, 0.07) !important;
}
.sub-choice input[type="radio"] {
accent-color: #f62780 !important;
}
.sub-choice small {
margin-left: auto !important;
color: #6f8388 !important;
font-weight: 800 !important;
}
.custom-date-choice input[type="date"] {
margin-left: auto !important;
border: 0 !important;
background: transparent !important;
color: #f62780 !important;
}
.sub-note {
font-size: 12px !important;
color: #5d6b70 !important;
margin: 8px 0 0 !important;
}
.sub-drawer-summary-card {
position: sticky !important;
top: 128px !important;
border-radius: 18px !important;
background: #fff !important;
padding: 18px !important;
border: 1px solid rgba(7, 90, 99, 0.08) !important;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;
}
.sub-summary-image {
height: 210px !important;
border-radius: 14px !important;
overflow: hidden !important;
background: linear-gradient(135deg, #f4e7dd, #fff8f2) !important;
margin-bottom: 14px !important;
display: grid !important;
place-items: center !important;
}
.sub-summary-image .prod-svg {
width: 100% !important;
height: 100% !important;
transform: scale(1.08) !important;
}
.sub-drawer-summary-card h3 {
font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
color: #1f1020 !important;
font-size: 22px !important;
margin: 0 0 8px !important;
}
.sub-drawer-summary-card p {
color: #5f6b70 !important;
font-size: 13px !important;
line-height: 1.45 !important;
margin: 0 0 12px !important;
}
.sub-drawer-includes {
margin: 0 0 14px !important;
padding: 12px 14px 12px 28px !important;
border-radius: 14px !important;
background: #f8fbfa !important;
color: #f62780 !important;
font-size: 12px !important;
line-height: 1.45 !important;
}
.sub-summary-box {
border-top: 1px solid #edf1ef !important;
margin-top: 10px !important;
padding-top: 10px !important;
}
.sub-summary-box > strong {
display: block !important;
color: #1f1020 !important;
margin-bottom: 8px !important;
}
.sub-summary-box div {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
padding: 9px 0 !important;
border-bottom: 1px solid #eef1ef !important;
color: #58686d !important;
font-size: 12px !important;
}
.sub-summary-box div b {
color: #1f1020 !important;
text-align: right !important;
}
.sub-summary-box div.total {
border-bottom: 0 !important;
font-weight: 900 !important;
font-size: 14px !important;
}
.sub-drawer-primary {
width: 100% !important;
margin-top: 14px !important;
border-radius: 999px !important;
min-height: 48px !important;
background: #f62780 !important;
color: #fff !important;
border: 0 !important;
box-shadow: 0 16px 30px rgba(7, 90, 99, 0.2) !important;
}
.sub-drawer-whatsapp {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin-top: 10px !important;
color: #f62780 !important;
font-weight: 900 !important;
text-decoration: none !important;
}
.sub-drawer-locked {
overflow: hidden !important;
}
.influencer-aligned-page {
align-items: stretch !important;
}
.influencer-aligned-page .panel {
border-radius: 32px !important;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.88),
rgba(255, 245, 250, 0.76)
) !important;
box-shadow: 0 24px 70px rgba(90, 26, 147, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.72) !important;
}
.influencer-hero-shot,
.influencer-side-visual {
border-radius: 30px !important;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.7),
rgba(255, 238, 248, 0.58)
) !important;
border: 1px solid rgba(236, 191, 212, 0.78) !important;
box-shadow: 0 24px 58px rgba(90, 26, 147, 0.14) !important;
}
.influencer-hero-shot img,
.influencer-side-visual img {
width: 100% !important;
height: clamp(260px, 34vw, 430px) !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
border-radius: 0 !important;
max-height: none !important;
}
.influencer-side-visual {
position: relative !important;
}
.influencer-side-visual:after {
content: "Creator-ready gifting campaigns";
position: absolute;
left: 18px;
right: 18px;
bottom: 18px;
padding: 12px 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: #5a1a93;
font-weight: 900;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
}
.logo,
.site-header .logo,
.footer-brand-card .logo {
padding: 8px 14px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, 0.42) !important;
border: 1px solid rgba(255, 255, 255, 0.62) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.75),
0 12px 30px rgba(90, 26, 147, 0.1) !important;
backdrop-filter: blur(16px) saturate(140%) !important;
-webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}
@media (max-width: 900px) {
.subscription-drawer-panel {
width: 96vw !important;
max-height: 94vh !important;
border-radius: 22px !important;
}
.subscription-drawer-layout {
grid-template-columns: 1fr !important;
padding: 18px !important;
}
.subscription-drawer-head {
padding: 22px 18px 14px !important;
}
.sub-drawer-summary-card {
position: static !important;
}
.subscription-perks,
.subscription-reference-grid,
.how-mini-grid {
grid-template-columns: 1fr !important;
}
.sub-ref-image {
height: 260px !important;
}
.influencer-hero-shot img,
.influencer-side-visual img {
height: min(70vw, 360px) !important;
}
.sub-ref-actions,
.sub-product-actions {
grid-template-columns: 1fr !important;
}
}
/* === GoGiftings final subscription drawer + influencer cleanup === */
.site-logo,
.logo,
.brand-logo,
.navbar-brand,
.app-logo {
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
background: rgba(255, 255, 255, 0.56);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 12px 38px rgba(11, 88, 95, 0.12);
border-radius: 18px;
padding: 8px 12px;
}
.subscription-reference-grid .sub-ref-card,
.sub-product-grid .sub-product {
box-shadow: 0 18px 45px rgba(5, 82, 91, 0.1);
border: 1px solid rgba(5, 82, 91, 0.08);
}
.sub-ref-actions,
.sub-product-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.sub-enquiry {
grid-column: 1/-1;
}
.sub-buy-now,
.sub-more-details {
min-height: 44px;
}
.sub-product-actions .sub-buy-now {
grid-column: auto;
}
.sub-product-actions .sub-enquiry {
min-height: 42px;
}
.subscription-drawer[aria-hidden="true"] {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.subscription-drawer[aria-hidden="false"] {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.sub-drawer-locked {
overflow: hidden;
}
.subscription-drawer {
position: fixed;
inset: 0;
z-index: 9999;
transition: 0.25s ease;
}
.subscription-drawer-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(16, 24, 31, 0.45);
backdrop-filter: blur(5px);
cursor: pointer;
}
.subscription-drawer-panel {
position: absolute;
inset: 18px 18px 18px auto;
width: min(920px, calc(100vw - 36px));
overflow: auto;
border-radius: 28px;
background: linear-gradient(
140deg,
rgba(255, 255, 255, 0.96),
rgba(255, 246, 252, 0.92)
);
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22);
border: 1px solid rgba(255, 255, 255, 0.65);
padding: 28px;
}
.subscription-drawer-head {
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
margin-bottom: 22px;
}
.subscription-drawer-head h2 {
font-size: 30px;
margin: 10px 0 6px;
color: #005a64;
}
.subscription-drawer-head p {
color: #756d7a;
max-width: 620px;
}
.close-x {
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid rgba(0, 90, 100, 0.15);
background: #fff;
color: #005a64;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.subscription-drawer-layout {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.8fr);
gap: 22px;
}
.subscription-config-form {
display: grid;
gap: 20px;
}
.sub-config-section {
padding: 18px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(0, 90, 100, 0.09);
}
.sub-config-section h3 {
font-size: 20px;
margin: 0 0 12px;
color: #005a64;
}
.sub-choice {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 13px 16px;
margin: 10px 0;
border: 1px solid rgba(0, 90, 100, 0.12);
border-radius: 14px;
background: #fff;
cursor: pointer;
transition: 0.2s ease;
}
.sub-choice:hover,
.sub-choice.active {
border-color: #005a64;
box-shadow: 0 10px 26px rgba(0, 90, 100, 0.1);
}
.sub-choice input[type="radio"] {
accent-color: #005a64;
}
.sub-choice small {
font-size: 11px;
color: #9a6a6a;
background: #fff2f2;
border-radius: 99px;
padding: 3px 8px;
}
.custom-date-choice input[type="date"] {
border: 0;
background: #f7f2ee;
border-radius: 10px;
padding: 7px;
color: #005a64;
}
.sub-note {
font-size: 12px;
color: #52636a;
margin: 10px 0 0;
}
.sub-drawer-summary-card {
position: sticky;
top: 0;
align-self: start;
padding: 16px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(0, 90, 100, 0.08);
box-shadow: 0 18px 55px rgba(5, 82, 91, 0.12);
}
.sub-summary-image {
height: 185px;
border-radius: 18px;
overflow: hidden;
background: #f8eee9;
}
.sub-summary-image .prod-svg {
height: 100%;
width: 100%;
}
.sub-drawer-summary-card h3 {
color: #005a64;
margin: 16px 0 8px;
}
.sub-drawer-summary-card p {
color: #756d7a;
}
.sub-drawer-includes {
margin: 14px 0;
padding-left: 18px;
color: #405158;
}
.sub-drawer-includes li {
margin: 6px 0;
}
.sub-summary-box {
border-radius: 18px;
background: #fbf8f4;
padding: 14px;
margin: 14px 0;
}
.sub-summary-box > div {
display: flex;
justify-content: space-between;
gap: 12px;
border-top: 1px solid rgba(0, 90, 100, 0.08);
padding: 10px 0;
color: #5d6870;
}
.sub-summary-box .total {
font-size: 18px;
color: #005a64;
}
.sub-drawer-primary {
width: 100%;
min-height: 48px;
}
.sub-drawer-whatsapp {
display: block;
text-align: center;
margin-top: 12px;
color: #005a64;
font-weight: 700;
}
.influencer-pro-page {
display: grid;
gap: 24px;
}
.influencer-pro-hero {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
gap: 30px;
align-items: center;
overflow: hidden;
}
.influencer-pro-copy h1 {
font-size: 42px;
margin: 16px 0 12px;
color: #281c2d;
}
.influencer-pro-copy p {
color: #756d7a;
font-size: 17px;
line-height: 1.7;
}
.influencer-pro-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 22px;
}
.influencer-pro-image {
height: 420px;
border-radius: 28px;
overflow: hidden;
margin: 0;
box-shadow: 0 24px 70px rgba(5, 82, 91, 0.15);
}
.influencer-pro-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.influencer-side-visual {
display: none !important;
}
.influencer-pro-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.influencer-pro-form .compact-head {
margin-bottom: 16px;
}
.influencer-pro-form h2 {
font-size: 30px;
color: #281c2d;
margin: 8px 0;
}
.influencer-pro-form textarea,
.influencer-pro-form input,
.influencer-pro-form select {
border: 1px solid rgba(0, 90, 100, 0.12);
border-radius: 14px;
background: rgba(255, 255, 255, 0.8);
}
@media (max-width: 900px) {
.subscription-drawer-panel {
inset: auto 0 0 0;
width: 100%;
max-height: 92vh;
border-radius: 28px 28px 0 0;
}
.subscription-drawer-layout,
.influencer-pro-hero {
grid-template-columns: 1fr;
}
.sub-drawer-summary-card {
position: relative;
}
.influencer-pro-grid {
grid-template-columns: 1fr;
}
.influencer-pro-image {
height: 320px;
}
.sub-ref-actions,
.sub-product-actions {
grid-template-columns: 1fr;
}
}
/* === Final GoGiftings subscription checkout drawer, reference logic not copied content === */
.sub-add-cart,
[data-subscription-add-cart],
.add-to-cart,
.btn-add-cart {
display: none !important;
}
.sub-ref-actions,
.sub-product-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.sub-buy-now,
.sub-more-details {
min-height: 44px !important;
border-radius: 999px !important;
font-weight: 800 !important;
}
.subscription-drawer {
position: fixed !important;
inset: 0 !important;
z-index: 10050 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition: 0.22s ease !important;
}
.subscription-drawer[aria-hidden="false"] {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.subscription-drawer-backdrop {
position: absolute !important;
inset: 0 !important;
border: 0 !important;
background: rgba(10, 19, 24, 0.48) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
}
.subscription-checkout-panel {
position: absolute !important;
inset: 22px !important;
width: auto !important;
max-width: none !important;
max-height: none !important;
overflow: auto !important;
border-radius: 30px !important;
background: #f8f6f1 !important;
color: #1f1020 !important;
border: 1px solid rgba(255, 255, 255, 0.86) !important;
box-shadow: 0 34px 100px rgba(0, 0, 0, 0.28) !important;
padding: 42px 44px !important;
transform: none !important;
}
.sub-page-close {
position: fixed !important;
right: 38px !important;
top: 36px !important;
z-index: 5 !important;
background: #fff !important;
box-shadow: 0 14px 34px rgba(0, 87, 102, 0.14) !important;
}
.sub-checkout-breadcrumb {
font-size: 12px !important;
color: #7b8a8f !important;
margin: 0 0 10px !important;
}
.sub-checkout-breadcrumb span {
color: #1f1020 !important;
font-weight: 800 !important;
}
.sub-checkout-layout {
display: grid !important;
grid-template-columns: minmax(420px, 1fr) minmax(300px, 360px) !important;
gap: min(8vw, 92px) !important;
align-items: start !important;
max-width: 1180px !important;
margin: 0 auto !important;
padding: 0 !important;
}
.sub-checkout-form {
display: block !important;
}
.sub-checkout-form h2 {
font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
font-size: clamp(28px, 3vw, 46px) !important;
line-height: 1.08 !important;
color: #1f1020 !important;
margin: 0 0 28px !important;
}
.sub-checkout-intro {
display: none !important;
}
.sub-checkout-section {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
margin: 0 0 34px !important;
box-shadow: none !important;
}
.sub-checkout-section h3 {
font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
color: #1f1020 !important;
font-size: clamp(21px, 2vw, 27px) !important;
font-weight: 500 !important;
margin: 0 0 16px !important;
}
.sub-choice {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
width: 100% !important;
margin: 10px 0 !important;
padding: 15px 18px !important;
background: #fff !important;
border: 1px solid rgba(0, 87, 102, 0.08) !important;
border-radius: 12px !important;
box-shadow: 0 7px 18px rgba(5, 36, 41, 0.035) !important;
color: #1f1020 !important;
cursor: pointer !important;
transition: 0.18s ease !important;
}
.sub-choice:hover,
.sub-choice.active {
border-color: #1f1020 !important;
box-shadow:
0 0 0 1px #f62780 inset,
0 14px 28px rgba(0, 87, 102, 0.08) !important;
}
.sub-radio-line {
display: flex !important;
align-items: center !important;
gap: 10px !important;
min-width: 0 !important;
}
.sub-radio-line input {
accent-color: #00788b !important;
width: 14px !important;
height: 14px !important;
flex: 0 0 auto !important;
}
.sub-radio-line b {
font-size: 13px !important;
font-weight: 800 !important;
color: #1f1020 !important;
}
.sub-radio-line em {
font-size: 10px !important;
font-style: normal !important;
text-transform: uppercase !important;
background: #c58d80 !important;
color: #fff !important;
border-radius: 999px !important;
padding: 4px 8px !important;
font-weight: 900 !important;
letter-spacing: 0.02em !important;
}
.sub-small-muted {
display: block !important;
color: #9aa5a8 !important;
font-size: 10px !important;
font-weight: 600 !important;
margin-left: 2px !important;
}
.sub-price-note {
text-align: right !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-end !important;
gap: 1px !important;
white-space: nowrap !important;
}
.sub-price-note del {
font-size: 10px !important;
color: #a8a7a4 !important;
}
.sub-price-note strong {
font-size: 13px !important;
color: #1f1020 !important;
font-weight: 900 !important;
}
.sub-price-note small {
font-size: 9px !important;
color: #1f1020 !important;
font-weight: 700 !important;
}
.custom-date-choice input[type="date"] {
border: 0 !important;
background: #f8f6f1 !important;
border-radius: 9px !important;
color: #1f1020 !important;
padding: 7px 9px !important;
max-width: 170px !important;
}
.sub-note {
display: flex !important;
gap: 7px !important;
align-items: center !important;
font-size: 12px !important;
color: #23424a !important;
font-weight: 700 !important;
margin: 10px 0 0 !important;
}
.sub-note span {
width: 16px !important;
height: 16px !important;
border-radius: 50% !important;
background: #9db9be !important;
color: #fff !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
}
.sub-checkout-summary {
position: sticky !important;
top: 24px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
color: #1f1020 !important;
}
.sub-summary-image {
height: 244px !important;
border-radius: 8px 8px 0 0 !important;
overflow: hidden !important;
background: #f1e5dc !important;
margin: 0 !important;
}
.sub-summary-image .prod-svg {
height: 100% !important;
width: 100% !important;
border-radius: 0 !important;
}
.sub-summary-copy-block {
background: #fff !important;
border-radius: 0 0 8px 8px !important;
padding: 18px 18px 20px !important;
box-shadow: 0 10px 24px rgba(5, 36, 41, 0.04) !important;
}
.sub-summary-copy-block h3 {
font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
color: #1f1020 !important;
font-size: 18px !important;
margin: 0 0 10px !important;
}
.sub-summary-copy-block p {
font-size: 12px !important;
line-height: 1.65 !important;
color: #1f1020 !important;
margin: 0 0 14px !important;
}
.sub-inline-details {
min-height: 34px !important;
padding: 8px 18px !important;
font-size: 12px !important;
border-radius: 999px !important;
}
.sub-drawer-includes-wrap {
background: #fff !important;
border-radius: 12px !important;
padding: 14px 18px !important;
margin: 14px 0 !important;
box-shadow: 0 8px 20px rgba(5, 36, 41, 0.035) !important;
}
.sub-drawer-includes-wrap strong {
font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
color: #1f1020 !important;
}
.sub-drawer-includes {
margin: 10px 0 0 !important;
padding-left: 18px !important;
color: #1f1020 !important;
font-size: 12px !important;
line-height: 1.6 !important;
}
.sub-summary-box {
background: #fff !important;
border-radius: 6px !important;
padding: 18px !important;
margin: 24px 0 14px !important;
box-shadow: 0 10px 24px rgba(5, 36, 41, 0.04) !important;
}
.sub-summary-box > strong {
display: block !important;
font-family: Inter, "Segoe UI", system-ui, sans-serif !important;
color: #1f1020 !important;
font-weight: 500 !important;
font-size: 18px !important;
margin: 0 0 3px !important;
}
.sub-summary-box > small {
display: block !important;
color: #8a9699 !important;
font-size: 10px !important;
margin-bottom: 14px !important;
}
.sub-summary-box div {
display: flex !important;
justify-content: space-between !important;
gap: 14px !important;
padding: 10px 0 !important;
border-top: 0 !important;
border-bottom: 1px solid #ece6df !important;
font-size: 12px !important;
color: #6f7b7f !important;
}
.sub-summary-box div:first-of-type {
border-top: 0 !important;
}
.sub-summary-box div:last-child {
border-bottom: 0 !important;
}
.sub-summary-box span {
color: #6f7b7f !important;
}
.sub-summary-box b {
font-size: 12px !important;
color: #1f1020 !important;
font-weight: 900 !important;
text-align: right !important;
}
.sub-summary-box .total {
padding-top: 14px !important;
margin-top: 2px !important;
}
.sub-summary-box .total span {
color: #1f1020 !important;
font-weight: 800 !important;
}
.sub-summary-box .total small {
display: block !important;
font-size: 8px !important;
color: #8a9699 !important;
font-weight: 500 !important;
}
.sub-summary-box .total b {
font-size: 14px !important;
color: #1f1020 !important;
}
.sub-drawer-primary {
width: 100% !important;
height: 46px !important;
border-radius: 999px !important;
background: #f62780 !important;
color: #fff !important;
font-size: 12px !important;
font-weight: 900 !important;
border: 0 !important;
box-shadow: 0 14px 28px rgba(0, 87, 102, 0.18) !important;
}
.sub-drawer-whatsapp {
display: block !important;
text-align: center !important;
font-size: 12px !important;
color: #1f1020 !important;
font-weight: 800 !important;
margin-top: 13px !important;
text-decoration: none !important;
}
body.sub-drawer-locked {
overflow: hidden !important;
}
@media (max-width: 900px) {
.subscription-checkout-panel {
inset: auto 0 0 !important;
max-height: 94vh !important;
border-radius: 28px 28px 0 0 !important;
padding: 24px 18px !important;
}
.sub-page-close {
right: 18px !important;
top: auto !important;
bottom: calc(94vh - 54px) !important;
}
.sub-checkout-layout {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.sub-checkout-summary {
position: relative !important;
top: auto !important;
}
.sub-summary-image {
height: 220px !important;
}
.sub-ref-actions,
.sub-product-actions {
grid-template-columns: 1fr !important;
}
.sub-choice {
align-items: flex-start !important;
}
.custom-date-choice {
flex-direction: column !important;
}
.custom-date-choice input[type="date"] {
max-width: none !important;
width: 100% !important;
}
}
/* GoGiftings hero auto slider controls */
.hero-card-image {
position: relative;
}
.hero-slider-controls {
position: absolute;
right: 24px;
bottom: 24px;
z-index: 8;
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow: 0 18px 38px rgba(69, 31, 61, 0.16);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.hero-slider-arrow,
.hero-slider-dot {
border: 0;
cursor: pointer;
transition:
transform 0.2s ease,
background 0.2s ease,
opacity 0.2s ease;
}
.hero-slider-arrow {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background: linear-gradient(135deg, var(--brand, #005a64), #087b83);
color: #fff;
font-size: 24px;
line-height: 1;
font-weight: 700;
box-shadow: 0 10px 22px rgba(0, 90, 100, 0.22);
}
.hero-slider-arrow:hover {
transform: translateY(-1px) scale(1.04);
}
.hero-slider-dots {
display: flex;
align-items: center;
gap: 7px;
}
.hero-slider-dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: rgba(0, 90, 100, 0.25);
padding: 0;
}
.hero-slider-dot.active {
width: 28px;
background: linear-gradient(135deg, var(--brand, #005a64), #f62780);
}
.hero-slide-in {
animation: heroSlideFade 0.65s cubic-bezier(0.2, 0.85, 0.22, 1) both;
}
@keyframes heroSlideFade {
0% {
opacity: 0.32;
transform: scale(1.04) translateX(18px);
}
100% {
opacity: 1;
transform: scale(1) translateX(0);
}
}
@media (max-width: 760px) {
.hero-slider-controls {
right: 14px;
bottom: auto;
top: 196px;
padding: 6px 8px;
gap: 7px;
}
.hero-slider-arrow {
width: 28px;
height: 28px;
font-size: 20px;
}
.hero-slider-dot {
width: 7px;
height: 7px;
}
.hero-slider-dot.active {
width: 22px;
}
}
/* === Ultra premium double-image hero slider === */
.hero-card-image {
isolation: isolate;
overflow: hidden !important;
position: relative !important;
background:
radial-gradient(
circle at 70% 18%,
rgba(255, 255, 255, 0.95) 0 13%,
transparent 32%
),
radial-gradient(
circle at 96% 88%,
rgba(235, 77, 151, 0.22),
transparent 36%
),
linear-gradient(135deg, #fff 0%, #fff7fb 44%, #f5deea 100%) !important;
}
.hero-card-image:before,
.hero-card-image:after {
pointer-events: none !important;
}
.hero-copy-image {
z-index: 6 !important;
}
.hero-swatcher {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
margin-top: 22px;
}
.hero-swatch {
border: 1px solid rgba(255, 255, 255, 0.72);
background: rgba(255, 255, 255, 0.72);
backdrop-filter: blur(14px);
box-shadow: 0 14px 30px rgba(90, 44, 82, 0.1);
border-radius: 999px;
padding: 8px 13px 8px 34px;
position: relative;
font-weight: 900;
color: #46243f;
cursor: pointer;
transition:
transform 0.28s ease,
box-shadow 0.28s ease,
border-color 0.28s ease;
}
.hero-swatch:before {
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 14px;
height: 14px;
border-radius: 999px;
transform: translateY(-50%);
background: var(--swatch, #eb4d97);
box-shadow: 0 0 0 5px
color-mix(in srgb, var(--swatch, #eb4d97) 18%, transparent);
}
.hero-swatch.active {
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--swatch, #eb4d97) 48%, #fff);
box-shadow: 0 20px 42px
color-mix(in srgb, var(--swatch, #eb4d97) 22%, transparent);
}
.hero-ultra-visual {
position: relative !important;
display: block !important;
overflow: visible !important;
background: transparent !important;
min-height: 390px !important;
border-radius: 32px !important;
}
.hero-photo-frame {
position: absolute;
margin: 0;
overflow: hidden;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(255, 255, 255, 0.74);
backdrop-filter: blur(18px);
box-shadow:
0 28px 64px rgba(79, 40, 72, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.hero-photo-main {
inset: 14px 28px 26px 34px;
border-radius: 34px;
z-index: 2;
transform: rotate(-1.1deg);
}
.hero-photo-accent {
right: -16px;
bottom: 8px;
width: 42%;
height: 52%;
border-radius: 28px;
z-index: 4;
transform: rotate(4deg);
box-shadow: 0 30px 70px rgba(76, 36, 69, 0.22);
}
.hero-banner-photo,
.hero-accent-photo {
display: block;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
object-fit: cover !important;
transform: none !important;
filter: saturate(1.08) contrast(1.03) !important;
}
.hero-photo-main .hero-banner-photo {
object-position: center 48% !important;
animation: heroKenburns 8s ease-in-out infinite alternate;
}
.hero-photo-accent .hero-accent-photo {
object-position: center !important;
}
.hero-orb {
position: absolute;
border-radius: 999px;
filter: blur(0.2px);
z-index: 1;
pointer-events: none;
}
.hero-orb-one {
width: 190px;
height: 190px;
left: -24px;
top: 14px;
background: radial-gradient(
circle,
rgba(235, 77, 151, 0.25),
transparent 68%
);
}
.hero-orb-two {
width: 160px;
height: 160px;
right: 22px;
top: 18px;
background: radial-gradient(
circle,
rgba(200, 150, 84, 0.24),
transparent 68%
);
}
.hero-floating-card {
position: absolute;
left: 14px;
bottom: 20px;
z-index: 5;
display: grid;
grid-template-columns: auto 1fr;
gap: 2px 10px;
align-items: center;
max-width: 250px;
padding: 13px 16px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.78);
border: 1px solid rgba(255, 255, 255, 0.82);
backdrop-filter: blur(16px);
box-shadow: 0 18px 42px rgba(71, 38, 64, 0.16);
color: #35223a;
}
.hero-floating-card span {
grid-row: 1/3;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 16px;
background: #fff5fa;
}
.hero-floating-card strong {
font-size: 13px;
line-height: 1.1;
}
.hero-floating-card small {
color: #786a7b;
font-weight: 700;
}
.hero-progress {
position: absolute;
left: 22px;
right: 22px;
bottom: -5px;
height: 4px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.6);
z-index: 7;
}
.hero-progress span {
display: block;
height: 100%;
width: 0;
background: linear-gradient(90deg, #f62780, #9b3fd0);
border-radius: inherit;
animation: heroProgress 5.2s linear infinite;
}
.hero-slider-controls {
position: absolute;
left: 28px;
bottom: 28px;
z-index: 8;
display: flex;
align-items: center;
gap: 10px;
}
.hero-slider-arrow,
.hero-slider-dot {
border: 0;
cursor: pointer;
}
.hero-slider-arrow {
width: 42px;
height: 42px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.76);
backdrop-filter: blur(12px);
box-shadow: 0 12px 28px rgba(64, 34, 58, 0.14);
font-size: 28px;
line-height: 1;
color: #4b2945;
}
.hero-slider-dots {
display: flex;
gap: 7px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.64);
backdrop-filter: blur(12px);
}
.hero-slider-dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: #c5b5c5;
transition:
width 0.25s ease,
background 0.25s ease;
}
.hero-slider-dot.active {
width: 28px;
background: #f62780;
}
.hero-slide-in {
animation: heroImagePop 0.62s ease both;
}
.hero-copy-image h1,
.hero-copy-image p {
transition:
opacity 0.28s ease,
transform 0.28s ease;
}
.hero-text-swap {
opacity: 0.15 !important;
transform: translateY(8px) !important;
}
@keyframes heroKenburns {
from {
transform: scale(1.02);
}
to {
transform: scale(1.085);
}
}
@keyframes heroImagePop {
from {
opacity: 0.2;
transform: scale(1.04);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes heroProgress {
from {
width: 0;
}
to {
width: 100%;
}
}
@media (max-width: 1180px) {
.hero-ultra-visual {
min-height: 340px !important;
}
.hero-photo-main {
inset: 12px 22px 20px 24px;
}
.hero-photo-accent {
width: 39%;
height: 48%;
right: 0;
}
}
@media (max-width: 760px) {
.hero-ultra-visual {
overflow: hidden !important;
min-height: 280px !important;
height: 280px !important;
margin-bottom: 18px;
}
.hero-photo-main {
inset: 8px 8px 46px 8px;
border-radius: 24px;
transform: none;
}
.hero-photo-accent {
width: 38%;
height: 42%;
right: 8px;
bottom: 32px;
border-radius: 20px;
}
.hero-floating-card {
left: 12px;
right: 92px;
bottom: 18px;
padding: 10px 12px;
border-radius: 18px;
}
.hero-floating-card span {
width: 34px;
height: 34px;
border-radius: 12px;
}
.hero-floating-card strong {
font-size: 12px;
}
.hero-floating-card small {
font-size: 11px;
}
.hero-slider-controls {
left: 14px;
bottom: 10px;
}
.hero-slider-arrow {
width: 34px;
height: 34px;
border-radius: 12px;
font-size: 22px;
}
.hero-progress {
left: 14px;
right: 14px;
bottom: 0;
}
.hero-swatcher {
display: none;
}
.hero-card-image .cta-row {
grid-template-columns: 1fr 1fr !important;
}
.hero-copy-image h1 {
font-size: clamp(32px, 9.5vw, 44px) !important;
}
}
/* Ultra-premium 1s auto hero slider polish */
.hero-ultra-visual .hero-photo-frame {
isolation: isolate;
}
.hero-ultra-visual .hero-photo-frame:after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.28),
rgba(255, 255, 255, 0) 38%
),
radial-gradient(
circle at 18% 12%,
rgba(255, 255, 255, 0.34),
rgba(255, 255, 255, 0) 32%
);
mix-blend-mode: screen;
z-index: 2;
}
.hero-banner-photo,
.hero-accent-photo {
transition:
opacity 0.42s cubic-bezier(0.2, 0.85, 0.22, 1),
transform 0.82s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.82s cubic-bezier(0.16, 1, 0.3, 1) !important;
will-change: opacity, transform, filter;
}
.hero-slide-in {
animation: heroPremiumSwap 0.72s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.hero-photo-main .hero-banner-photo {
animation: heroKenburnsPremium 6s ease-in-out infinite alternate !important;
}
.hero-progress span {
animation-duration: 1s !important;
}
@keyframes heroPremiumSwap {
0% {
opacity: 0.18;
transform: scale(1.075) translate3d(0, 10px, 0);
filter: saturate(1.18) contrast(1.06) blur(8px);
}
42% {
opacity: 1;
filter: saturate(1.12) contrast(1.04) blur(0);
}
100% {
opacity: 1;
transform: scale(1.01) translate3d(0, 0, 0);
filter: saturate(1.08) contrast(1.03) blur(0);
}
}
@keyframes heroKenburnsPremium {
from {
transform: scale(1.035) translate3d(-0.7%, -0.4%, 0);
}
to {
transform: scale(1.085) translate3d(0.8%, 0.5%, 0);
}
}
/* Premium top-bar language and currency switchers */
.topbar-right {
display: flex;
align-items: center;
gap: 10px;
white-space: nowrap;
}
.topbar-right a {
color: inherit;
text-decoration: none;
}
.topbar-select {
appearance: none;
-webkit-appearance: none;
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: inherit;
font: inherit;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
padding: 6px 26px 6px 12px;
cursor: pointer;
min-height: 30px;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position:
calc(100% - 14px) 50%,
calc(100% - 9px) 50%;
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
}
.topbar-select option {
color: #111;
}
.topbar-select:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.75);
outline-offset: 2px;
}
html[dir="rtl"] body {
direction: rtl;
}
html[dir="rtl"] .header-search-wrap,
html[dir="rtl"] .mega-menu,
html[dir="rtl"] .hero-content,
html[dir="rtl"] .product-card,
html[dir="rtl"] .section-head,
html[dir="rtl"] .footer {
text-align: right;
}
html[dir="rtl"] .topbar-select {
padding: 6px 12px 6px 26px;
background-position:
12px 50%,
17px 50%;
}
@media (max-width: 720px) {
.topbar-inner {
gap: 8px;
}
.topbar-left {
display: none;
}
.topbar-right {
width: 100%;
justify-content: center;
flex-wrap: wrap;
}
}
/* Dynamic topbar language/currency polish */
.topbar-select {
min-height: 28px;
border-radius: 999px;
padding: 3px 24px 3px 10px;
border: 1px solid rgba(255, 255, 255, 0.32);
background: rgba(255, 255, 255, 0.12);
color: inherit;
font-weight: 700;
}
.gg-dirham-symbol {
width: 0.82em;
height: 0.82em;
object-fit: contain;
vertical-align: -0.08em;
margin-inline-end: 0.18em;
}
.price .gg-dirham-symbol,
[data-base-aed] .gg-dirham-symbol {
filter: none;
}
html[dir="rtl"] .header-row,
html[dir="rtl"] .topbar-inner,
html[dir="rtl"] .navbar .container {
direction: rtl;
}
html[dir="rtl"] .search-modern input {
text-align: right;
}
/* Working top-bar language/currency dynamic controls */
.topbar-select {
appearance: none;
-webkit-appearance: none;
border: 1px solid rgba(255, 255, 255, 0.34);
border-radius: 999px;
background-color: rgba(255, 255, 255, 0.12);
color: inherit;
font: inherit;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.02em;
padding: 5px 26px 5px 11px;
cursor: pointer;
min-height: 30px;
background-image:
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position:
calc(100% - 14px) 50%,
calc(100% - 9px) 50%;
background-size:
5px 5px,
5px 5px;
background-repeat: no-repeat;
}
.topbar-select option {
color: #111;
background: #fff;
}
.topbar-select:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.75);
outline-offset: 2px;
}
.gg-money {
display: inline-flex;
align-items: baseline;
gap: 0.16em;
white-space: nowrap;
}
.gg-dirham-symbol {
width: 0.78em;
height: 0.78em;
object-fit: contain;
display: inline-block;
vertical-align: -0.06em;
margin-inline-end: 0.08em;
}
.gg-currency-symbol {
font-weight: inherit;
}
.gg-price-suffix {
white-space: nowrap;
}
html[dir="rtl"] body {
direction: rtl;
}
html[dir="rtl"] .header-row,
html[dir="rtl"] .topbar-inner,
html[dir="rtl"] .navbar .container {
direction: rtl;
}
html[dir="rtl"] .search-modern input,
html[dir="rtl"] .hero-content,
html[dir="rtl"] .section-head,
html[dir="rtl"] .product-card,
html[dir="rtl"] .footer {
text-align: right;
}
html[dir="rtl"] .topbar-select {
padding: 5px 11px 5px 26px;
background-position:
12px 50%,
17px 50%;
}
body.is-hindi {
font-family: Arial, "Noto Sans Devanagari", sans-serif;
}
@media (max-width: 720px) {
.topbar-left {
display: none;
}
.topbar-right {
width: 100%;
justify-content: center;
flex-wrap: wrap;
gap: 7px;
}
.topbar-select {
font-size: 11px;
min-height: 28px;
}
}
/* GoGiftings UAE Dirham symbol sizing/alignment fix */
.gg-money {
display: inline-flex !important;
align-items: center !important;
gap: 0.18em !important;
white-space: nowrap !important;
vertical-align: baseline !important;
line-height: inherit !important;
}
.gg-dirham-symbol {
display: inline-block !important;
width: 0.82em !important;
height: 0.82em !important;
min-width: 0.82em !important;
max-width: 0.82em !important;
min-height: 0.82em !important;
max-height: 0.82em !important;
object-fit: contain !important;
vertical-align: -0.08em !important;
margin: 0 0.08em 0 0 !important;
flex: 0 0 0.82em !important;
}
.price-box .amount .gg-dirham-symbol,
.price .gg-dirham-symbol,
.product-price .gg-dirham-symbol,
.card-price .gg-dirham-symbol {
width: 0.78em !important;
height: 0.78em !important;
min-width: 0.78em !important;
max-width: 0.78em !important;
min-height: 0.78em !important;
max-height: 0.78em !important;
}
.product-card .gg-money,
.option-card .gg-money,
.addon-option .gg-money {
align-items: center !important;
}
.product-card .gg-dirham-symbol,
.option-card .gg-dirham-symbol,
.addon-option .gg-dirham-symbol {
width: 0.8em !important;
height: 0.8em !important;
min-width: 0.8em !important;
max-width: 0.8em !important;
min-height: 0.8em !important;
max-height: 0.8em !important;
}
/* Final cart count visibility fix */
.header-actions .icon-btn,
a.icon-btn[href*="#addonDrawer"],
a.icon-btn[data-addon-open] {
overflow: visible !important;
position: relative !important;
}
.header-actions .icon-btn .badge,
a.icon-btn[href*="#addonDrawer"] .badge,
a.icon-btn[data-addon-open] .badge {
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
top: -8px !important;
right: -10px !important;
z-index: 30 !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 5px !important;
border-radius: 999px !important;
place-items: center !important;
line-height: 18px !important;
font-size: 11px !important;
font-weight: 800 !important;
color: #fff !important;
background: linear-gradient(135deg, #6d3066, #5a1a93) !important;
pointer-events: none !important;
transform: none !important;
clip: auto !important;
}
@media (max-width: 900px) {
.header-actions .icon-btn .badge,
a.icon-btn[href*="#addonDrawer"] .badge,
a.icon-btn[data-addon-open] .badge {
display: grid !important;
}
}
/* FINAL responsive language/currency switcher visibility fix */
header .topbar,
.topbar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: 34px !important;
overflow: visible !important;
}
header .topbar .topbar-inner,
.topbar .topbar-inner,
.topbar .container.topbar-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
flex-wrap: wrap !important;
min-height: 34px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
header .topbar-right,
.topbar-right {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
flex-wrap: wrap !important;
white-space: normal !important;
min-width: max-content !important;
position: relative !important;
z-index: 1002 !important;
}
#languageSwitcher,
#currencySwitcher,
.topbar-select {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
min-width: 106px !important;
max-width: 46vw !important;
height: auto !important;
min-height: 30px !important;
line-height: 1.2 !important;
padding: 6px 28px 6px 12px !important;
border-radius: 999px !important;
border: 1px solid rgba(255, 255, 255, 0.45) !important;
background-color: rgba(255, 255, 255, 0.18) !important;
color: #fff !important;
font-size: 12px !important;
font-weight: 800 !important;
pointer-events: auto !important;
transform: none !important;
clip: auto !important;
clip-path: none !important;
}
#languageSwitcher option,
#currencySwitcher option {
color: #111 !important;
background: #fff !important;
}
@media (max-width: 980px) {
header .topbar .topbar-inner,
.topbar .topbar-inner,
.topbar .container.topbar-inner {
justify-content: center !important;
text-align: center !important;
}
.topbar-left {
display: none !important;
}
.topbar-right {
width: 100% !important;
min-width: 0 !important;
justify-content: center !important;
gap: 6px !important;
}
}
@media (max-width: 768px) {
header .topbar,
.topbar {
display: block !important;
position: relative !important;
top: auto !important;
z-index: 1001 !important;
font-size: 12px !important;
}
.topbar-right > span[data-i18n="callUs"],
.topbar-right > a[href^="tel:"],
.topbar-right > .sep {
display: none !important;
}
#languageSwitcher,
#currencySwitcher,
.topbar-select {
min-width: 112px !important;
max-width: 44vw !important;
min-height: 32px !important;
font-size: 12px !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
}
}
@media (max-width: 360px) {
#languageSwitcher,
#currencySwitcher,
.topbar-select {
min-width: 100px !important;
max-width: 48vw !important;
font-size: 11px !important;
padding-left: 9px !important;
padding-right: 24px !important;
}
}
/* Robust UAE Dirham symbol sizing and modular-price support */
.gg-money {
display: inline-flex !important;
align-items: baseline !important;
gap: 0.16em !important;
white-space: nowrap !important;
}
.gg-dirham-sign,
.gg-dirham-inline-holder .gg-dirham-sign {
display: inline-block !important;
width: 0.72em !important;
height: 0.72em !important;
min-width: 0.72em !important;
max-width: 0.72em !important;
max-height: 0.72em !important;
vertical-align: -0.06em !important;
background-image: url("../dirham-symbol.png") !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background-size: contain !important;
color: transparent !important;
text-indent: -9999px !important;
overflow: hidden !important;
line-height: 1 !important;
flex: 0 0 0.72em !important;
}
.gg-dirham-inline-holder {
display: inline-flex !important;
align-items: baseline !important;
width: 0.72em !important;
min-width: 0.72em !important;
max-width: 0.72em !important;
height: 0.72em !important;
line-height: 1 !important;
margin-inline-end: 0.14em !important;
vertical-align: -0.06em !important;
color: transparent !important;
overflow: visible !important;
flex: 0 0 0.72em !important;
}
.gg-price-with-dirham {
display: inline-flex !important;
align-items: baseline !important;
gap: 0.16em !important;
white-space: nowrap !important;
}
.product-card .gg-dirham-sign,
.price .gg-dirham-sign,
[class*="price"] .gg-dirham-sign,
[class*="Price"] .gg-dirham-sign {
width: 0.72em !important;
height: 0.72em !important;
}
/* Clean gradient UAE Dirham symbol.
Uses the existing symbol PNG as an alpha mask, so the icon keeps its exact shape while taking this gradient:
linear-gradient(135deg, #F25C7A 0%, #F8A1B2 50%, #FDECEF 100%)
*/
.gg-dirham-sign,
.gg-dirham-inline-holder .gg-dirham-sign,
.gg-currency-symbol-dirham,
[data-currency-symbol="DIRHAM"],
[class*="isCurrencySymbol"] .gg-dirham-sign {
display: inline-block !important;
width: 0.78em !important;
height: 0.78em !important;
min-width: 0.78em !important;
max-width: 0.78em !important;
min-height: 0.78em !important;
max-height: 0.78em !important;
line-height: 1 !important;
vertical-align: -0.07em !important;
margin-inline-end: 0.16em !important;
background: linear-gradient(
135deg,
#f25c7a 0%,
#f8a1b2 50%,
#fdecef 100%
) !important;
background-image: linear-gradient(
135deg,
#f25c7a 0%,
#f8a1b2 50%,
#fdecef 100%
) !important;
-webkit-mask-image: url("../../assets/dirham-symbol.png") !important;
mask-image: url("../../assets/dirham-symbol.png") !important;
-webkit-mask-repeat: no-repeat !important;
mask-repeat: no-repeat !important;
-webkit-mask-position: center !important;
mask-position: center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
color: transparent !important;
font-size: inherit !important;
text-indent: 0 !important;
overflow: hidden !important;
flex: 0 0 0.78em !important;
}
.gg-dirham-inline-holder {
display: inline-flex !important;
align-items: baseline !important;
width: 0.78em !important;
min-width: 0.78em !important;
max-width: 0.78em !important;
height: 0.78em !important;
min-height: 0.78em !important;
max-height: 0.78em !important;
line-height: 1 !important;
margin-inline-end: 0.16em !important;
vertical-align: -0.07em !important;
color: transparent !important;
overflow: visible !important;
flex: 0 0 0.78em !important;
}
.gg-money,
.gg-price-with-dirham {
display: inline-flex !important;
align-items: baseline !important;
gap: 0.12em !important;
white-space: nowrap !important;
}
@media (max-width: 640px) {
.gg-dirham-sign,
.gg-dirham-inline-holder .gg-dirham-sign,
.gg-currency-symbol-dirham,
[data-currency-symbol="DIRHAM"],
[class*="isCurrencySymbol"] .gg-dirham-sign {
width: 0.74em !important;
height: 0.74em !important;
min-width: 0.74em !important;
max-width: 0.74em !important;
min-height: 0.74em !important;
max-height: 0.74em !important;
flex-basis: 0.74em !important;
}
}
/* Custom UAE Dirham icon price display */
.dirham-price,
.price:has(.dirham-icon) {
display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
line-height: 1;
vertical-align: middle;
}
.dirham-icon {
width: 16px;
height: 16px;
object-fit: contain;
flex: 0 0 auto;
display: inline-block;
}
.dirham-value {
line-height: 1;
}
.price .dirham-icon,
.product-card .dirham-icon,
.card .dirham-icon,
small .dirham-icon {
width: 14px;
height: 14px;
}
.amount .dirham-icon,
.price-box .dirham-icon,
.total .dirham-icon {
width: 20px;
height: 20px;
}
small .dirham-price {
gap: 6px;
}
/* === Dirham icon final hardening ===
Keeps the custom UAE Dirham image as a tiny inline currency glyph in every card,
variant tile, filter, cart, checkout, subscription, and banner context. */
.dirham-price,
.price:has(.dirham-icon),
.product-price:has(.dirham-icon),
.variant-price:has(.dirham-icon),
.amount:has(.dirham-icon),
.total:has(.dirham-icon),
.gg-money,
.gg-price-with-dirham {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
white-space: nowrap !important;
vertical-align: middle !important;
line-height: 1 !important;
}
.dirham-icon,
img.dirham-icon,
svg.dirham-icon,
.dirham-price > .dirham-icon {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
max-width: 16px !important;
max-height: 16px !important;
flex: 0 0 16px !important;
display: inline-block !important;
object-fit: contain !important;
aspect-ratio: 1 / 1 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
vertical-align: -0.12em !important;
}
.product-card .dirham-icon,
.card .dirham-icon,
.variant-card .dirham-icon,
.option-card .dirham-icon,
small .dirham-icon,
.filter-panel .dirham-icon,
.sidebar .dirham-icon {
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
min-height: 14px !important;
max-width: 14px !important;
max-height: 14px !important;
flex-basis: 14px !important;
}
.price-box .amount .dirham-icon,
.product-detail .price-box .dirham-icon,
.pdp-price .dirham-icon,
.grand-total .dirham-icon,
.total .dirham-icon {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
flex-basis: 20px !important;
}
.dirham-value,
.gg-price-value {
line-height: 1 !important;
}
/* Prevent broad product-card image rules from resizing currency icons. */
.product-card img.dirham-icon,
.products img.dirham-icon,
.listing-grid img.dirham-icon,
.variant-card img.dirham-icon,
.option-card img.dirham-icon,
.card img.dirham-icon {
width: 14px !important;
height: 14px !important;
max-width: 14px !important;
max-height: 14px !important;
object-fit: contain !important;
}
/* === Final Dirham icon sizing + topbar currency icon === */
.dirham-price {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
white-space: nowrap !important;
line-height: 1 !important;
vertical-align: middle !important;
font-weight: 600;
}
.dirham-icon,
img.dirham-icon,
svg.dirham-icon,
.dirham-price > .dirham-icon {
width: 16px !important;
height: 16px !important;
min-width: 16px !important;
min-height: 16px !important;
max-width: 16px !important;
max-height: 16px !important;
flex: 0 0 16px !important;
display: inline-block !important;
object-fit: contain !important;
aspect-ratio: 1/1 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
vertical-align: -0.12em !important;
}
.product-card .dirham-icon,
.card .dirham-icon,
.sub-choice .dirham-icon,
.sub-summary-card .dirham-icon,
.filter-panel .dirham-icon,
.sidebar .dirham-icon,
small .dirham-icon {
width: 14px !important;
height: 14px !important;
min-width: 14px !important;
min-height: 14px !important;
max-width: 14px !important;
max-height: 14px !important;
flex-basis: 14px !important;
}
.product-detail .dirham-icon,
.price-box .dirham-icon,
.grand-total .dirham-icon,
.total .dirham-icon {
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
max-width: 20px !important;
max-height: 20px !important;
flex-basis: 20px !important;
}
.dirham-value {
line-height: 1 !important;
}
#currencySwitcher.dirham-currency-select {
width: 58px !important;
min-width: 58px !important;
color: transparent !important;
text-shadow: none !important;
background-image:
url("../dirham-symbol.svg"),
linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%) !important;
background-repeat: no-repeat !important;
background-size:
16px 16px,
5px 5px,
5px 5px !important;
background-position:
12px center,
calc(100% - 14px) 50%,
calc(100% - 9px) 50% !important;
}
#currencySwitcher.dirham-currency-select option {
color: #2d1b2e !important;
}
/* Discounted price display: current price + struck-through original price */
.price-discounted,
.sale-price-pair {
display: inline-flex;
align-items: baseline;
gap: 8px;
flex-wrap: wrap;
}
.sale-price-pair .dirham-price {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.sale-current {
color: #8b3f97;
font-weight: 800;
}
.sale-current .dirham-icon,
.sale-original .dirham-icon {
width: 16px !important;
height: 16px !important;
min-width: 16px;
max-width: 16px;
object-fit: contain;
display: inline-block;
}
.sale-original {
color: #9a93a3;
font-weight: 600;
text-decoration: line-through;
text-decoration-thickness: 1.5px;
}
.sale-original .dirham-icon {
width: 14px !important;
height: 14px !important;
min-width: 14px;
max-width: 14px;
opacity: 0.65;
}
.price-detail .sale-current {
font-size: 30px;
}
.price-detail .sale-current .dirham-icon {
width: 22px !important;
height: 22px !important;
}
.price-detail .sale-original {
font-size: 18px;
}
.price-variant .sale-price-pair {
justify-content: center;
gap: 6px;
}
.price-variant .sale-current .dirham-icon,
.product-card .sale-current .dirham-icon {
width: 14px !important;
height: 14px !important;
}
.product-card .price-discounted {
min-height: auto;
}
@media (max-width: 640px) {
.price-detail .sale-current {
font-size: 24px;
}
.sale-price-pair {
gap: 6px;
}
}
/* Discounted product price display */
.discount-price {
display: inline-flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
line-height: 1;
}
.discount-price .sale-price,
.discount-price .sale-price .dirham-price {
color: #2d1b2e;
font-weight: 800;
}
.discount-price .compare-price,
.discount-price .compare-price .dirham-price {
color: #9a94a7;
font-weight: 600;
font-size: 0.92em;
text-decoration: line-through;
text-decoration-thickness: 1.5px;
}
.discount-price .compare-price .dirham-icon {
opacity: 0.72;
}
.product-card .price .discount-price {
margin-top: 2px;
}
/* Premium dynamic gift message card system */
.gg-message-card-system {
margin-top: 28px;
border-radius: 22px;
overflow: visible;
background: linear-gradient(180deg, #fff, #fff9fc);
border: 1px solid #f1d5e3;
box-shadow: 0 18px 44px rgba(82, 48, 76, 0.08);
}
.gg-card-accordion {
width: 100%;
min-height: 76px;
display: flex;
align-items: center;
gap: 18px;
border: 0;
background: #fbfaf6;
color: #68721f;
padding: 18px 24px;
text-align: start;
cursor: pointer;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.gg-card-icon {
font-size: 34px;
}
.gg-card-chevron {
margin-inline-start: auto;
font-size: 32px;
color: #999;
transition: transform 0.25s ease;
}
.gg-card-accordion[aria-expanded="true"] .gg-card-chevron {
transform: rotate(90deg);
}
.gg-card-builder {
padding: 0 0 28px;
}
.gg-card-builder[hidden] {
display: none;
}
.gg-card-toolbar {
display: grid;
grid-template-columns:
minmax(180px, 250px) minmax(230px, 320px) minmax(150px, 200px)
minmax(150px, 200px);
gap: 24px;
align-items: end;
background: #7a822d;
padding: 12px 22px 24px;
position: relative;
z-index: 5;
}
.gg-dd {
position: relative;
}
.gg-dd label {
display: block;
color: #fff;
font-weight: 800;
text-transform: uppercase;
margin: 0 0 8px;
}
.gg-dd-btn {
height: 46px;
width: 100%;
border: 0;
border-radius: 5px;
background: #f4f4f4;
color: #101827;
font-weight: 800;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
}
.gg-dd-btn span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.gg-dd-btn b {
font-size: 24px;
line-height: 1;
}
.gg-dd.open .gg-dd-btn b {
transform: rotate(180deg);
}
.gg-dd-menu {
position: absolute;
top: calc(100% + 2px);
inset-inline-start: 0;
width: 100%;
max-height: 300px;
overflow: auto;
background: #fff;
border-radius: 0 0 8px 8px;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
border: 1px solid #ddd;
opacity: 0;
transform: translateY(-8px) scale(0.98);
pointer-events: none;
transition:
opacity 0.18s ease,
transform 0.18s ease;
z-index: 20;
}
.gg-dd.open .gg-dd-menu {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.gg-dd-option {
width: 100%;
border: 0;
background: #fff;
color: #101827;
display: grid;
grid-template-columns: 24px 1fr;
gap: 12px;
text-align: start;
padding: 13px 14px;
font-size: 17px;
line-height: 1.45;
cursor: pointer;
}
.gg-dd-option:hover,
.gg-dd-option[aria-selected="true"] {
background: #fff4e8;
}
.gg-dd-radio {
width: 20px;
height: 20px;
border: 2px solid #333;
border-radius: 50%;
margin-top: 2px;
}
.gg-dd-option[aria-selected="true"] .gg-dd-radio {
box-shadow: inset 0 0 0 5px #fff;
background: #ef7220;
border-color: #ef7220;
}
.gg-save-card,
.gg-cancel-card {
height: 50px;
border: 0;
border-radius: 5px;
font-weight: 900;
font-size: 18px;
cursor: pointer;
text-transform: uppercase;
}
.gg-save-card {
background: #f47422;
color: #fff;
position: relative;
overflow: hidden;
}
.gg-save-card.loading {
color: transparent;
background-image: repeating-linear-gradient(
135deg,
#d9862a 0,
#d9862a 18px,
#e7bb78 18px,
#e7bb78 36px
);
animation: ggBarber 0.75s linear infinite;
}
.gg-save-card.loading:after {
content: "Saving";
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: #fff;
}
.gg-cancel-card {
background: #eee;
color: #56616d;
}
@keyframes ggBarber {
to {
background-position: 52px 0;
}
}
.gg-card-layout {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
gap: 24px;
padding: 28px 22px 0;
}
.gg-open-card {
min-height: 420px;
display: grid;
grid-template-columns: 1fr 1fr;
perspective: 1200px;
filter: drop-shadow(0 22px 24px rgba(0, 0, 0, 0.28));
animation: ggOpenCard 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.gg-card-page {
background: #fff;
min-height: 420px;
position: relative;
transform-style: preserve-3d;
}
.gg-card-page-left {
background: linear-gradient(120deg, #fff, #f7f7f7);
clip-path: polygon(0 4%, 100% 8%, 100% 96%, 0 100%);
transform: rotateY(5deg);
transform-origin: right center;
}
.gg-card-page-right {
clip-path: polygon(0 8%, 100% 4%, 100% 100%, 0 96%);
transform: rotateY(-3deg);
transform-origin: left center;
}
.gg-card-page-right:before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
width: 18px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent);
}
.gg-card-art {
height: 100%;
display: grid;
place-content: center;
text-align: center;
padding: 32px;
background:
radial-gradient(
circle at 30% 20%,
rgba(246, 39, 128, 0.16),
transparent 34%
),
radial-gradient(
circle at 80% 80%,
rgba(244, 116, 34, 0.13),
transparent 32%
);
}
.gg-card-art span {
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #8b6f38;
font-weight: 900;
}
.gg-card-art strong {
font-size: 34px;
color: #f62780;
}
.gg-card-art small {
color: #7c7c7c;
}
.gg-edit-float {
position: absolute;
top: 34px;
inset-inline-end: 32px;
border: 0;
background: transparent;
font-size: 28px;
color: #666;
cursor: pointer;
}
.gg-card-script {
font-family: "Brush Script MT", "Segoe Script", cursive;
padding: 58px 42px;
color: #181818;
font-size: 27px;
line-height: 1.22;
}
.gg-card-script.swap {
animation: ggInk 0.28s ease;
}
.gg-dear {
font-size: 30px;
margin: 0 0 22px;
color: #222;
}
.gg-message {
min-height: 140px;
margin: 0;
}
.gg-left-count {
text-align: end;
color: #999;
font:
14px Arial,
sans-serif;
margin: 14px 0 48px;
}
.gg-from-block span {
display: block;
font-size: 30px;
}
.gg-from-block strong {
display: block;
font-size: 30px;
font-weight: 400;
margin-top: 16px;
}
.gg-card-form {
background: #fff;
border: 1px solid #f1d5e3;
border-radius: 20px;
padding: 20px;
box-shadow: 0 14px 30px rgba(82, 48, 76, 0.08);
}
.gg-card-form h3 {
margin: 0 0 14px;
}
.gg-card-form label {
display: block;
margin-bottom: 12px;
}
.gg-card-form label span {
display: block;
font-size: 12px;
font-weight: 900;
color: #7a315d;
margin-bottom: 6px;
text-transform: uppercase;
}
.gg-card-form input,
.gg-card-form textarea {
width: 100%;
border: 1px solid #e0d3dd;
border-radius: 12px;
padding: 12px 14px;
font: inherit;
outline: 0;
background: #fff;
}
.gg-card-form input:focus,
.gg-card-form textarea:focus {
border-color: #f62780;
box-shadow: 0 0 0 4px rgba(246, 39, 128, 0.12);
}
.gg-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.gg-form-help {
display: flex;
justify-content: space-between;
color: #888;
font-size: 13px;
margin: -6px 0 10px;
}
.gg-error {
min-height: 20px;
color: #d52222;
font-weight: 800;
margin: 0;
}
.gg-card-form .is-invalid {
border-color: #d52222;
background: #fff5f5;
}
@keyframes ggOpenCard {
from {
opacity: 0;
transform: translateY(18px) rotateX(8deg) scale(0.98);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes ggInk {
from {
opacity: 0.3;
transform: translateY(8px);
}
to {
opacity: 1;
transform: none;
}
}
html[dir="rtl"] .gg-card-script {
text-align: right;
}
html[dir="rtl"] .gg-card-toolbar {
direction: rtl;
}
.gg-card-system-collapsed .gg-card-builder {
display: none;
}
@media (max-width: 980px) {
.gg-card-toolbar {
grid-template-columns: 1fr 1fr;
}
.gg-card-layout {
grid-template-columns: 1fr;
}
.gg-open-card {
min-height: 360px;
}
.gg-card-page {
min-height: 360px;
}
}
@media (max-width: 620px) {
.gg-card-toolbar {
grid-template-columns: 1fr;
gap: 12px;
padding: 14px;
}
.gg-card-layout {
padding: 18px 12px;
}
.gg-open-card {
grid-template-columns: 1fr;
filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.18));
}
.gg-card-page-left {
display: none;
}
.gg-card-page-right {
clip-path: none;
transform: none;
min-height: 360px;
}
.gg-card-script {
padding: 56px 26px;
font-size: 23px;
}
.gg-form-grid {
grid-template-columns: 1fr;
}
.gg-dd-menu {
position: fixed;
left: 12px !important;
right: 12px !important;
top: auto !important;
bottom: 18px;
width: auto;
max-height: 55vh;
border-radius: 18px;
z-index: 999;
}
.gg-dd-menu-wide {
width: auto;
}
}
/* Drawer UI upgrade for checkout message card */
.gg-drawer-entry {
margin-top: 22px;
background: transparent;
border: 0;
box-shadow: none;
overflow: visible;
}
.gg-drawer-entry .gg-card-accordion {
border-radius: 16px;
background: #fffdf7;
border: 1px solid #f1e6cf;
box-shadow: 0 14px 32px rgba(41, 31, 20, 0.08);
color: #68721f;
min-height: 88px;
}
.gg-card-status {
display: block;
margin-inline-start: 4px;
color: #8d8d8d;
font-size: 12px;
font-weight: 700;
text-transform: none;
letter-spacing: 0;
}
.gg-card-drawer[hidden] {
display: none !important;
}
.gg-card-drawer {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
grid-template-columns: 1fr;
pointer-events: none;
}
.gg-card-drawer.is-open {
pointer-events: auto;
}
.gg-card-backdrop {
position: absolute;
inset: 0;
border: 0;
background: rgba(12, 12, 12, 0.62);
backdrop-filter: blur(5px);
opacity: 0;
transition: opacity 0.28s ease;
}
.gg-card-drawer.is-open .gg-card-backdrop {
opacity: 1;
}
.gg-card-drawer-panel {
position: absolute;
top: 0;
right: 0;
height: 100dvh;
width: min(1180px, 94vw);
overflow: auto;
background: linear-gradient(180deg, #fff, #fff8fc);
box-shadow: -30px 0 70px rgba(0, 0, 0, 0.28);
transform: translateX(105%);
transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
padding-bottom: 28px;
}
.gg-card-drawer.is-open .gg-card-drawer-panel {
transform: translateX(0);
}
html[dir="rtl"] .gg-card-drawer-panel {
right: auto;
left: 0;
transform: translateX(-105%);
}
html[dir="rtl"] .gg-card-drawer.is-open .gg-card-drawer-panel {
transform: translateX(0);
}
.gg-drawer-head {
position: sticky;
top: 0;
z-index: 30;
display: flex;
justify-content: space-between;
gap: 18px;
align-items: flex-start;
padding: 24px 28px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid #f0d7e2;
}
.gg-drawer-kicker {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.24em;
color: #f47422;
font-weight: 900;
}
.gg-drawer-head h2 {
margin: 4px 0 4px;
color: #222;
font-size: 28px;
}
.gg-drawer-head p {
margin: 0;
color: #777;
}
.gg-drawer-close {
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: #f4f4f4;
color: #333;
font-size: 30px;
line-height: 1;
cursor: pointer;
}
.gg-drawer-close:hover {
background: #f47422;
color: #fff;
}
.gg-card-drawer .gg-card-toolbar {
position: sticky;
top: 95px;
z-index: 25;
border-radius: 0;
background: #7a822d;
grid-template-columns:
minmax(180px, 260px) minmax(240px, 340px) minmax(130px, 190px)
minmax(130px, 190px);
padding: 14px 28px 20px;
}
.gg-card-drawer .gg-card-layout {
padding: 30px 28px 0;
grid-template-columns: minmax(520px, 1.45fr) minmax(320px, 0.8fr);
align-items: start;
}
.gg-card-drawer .gg-open-card {
min-height: 500px;
}
.gg-card-drawer .gg-card-page {
min-height: 500px;
}
.gg-card-drawer .gg-card-script {
font-size: 29px;
padding: 70px 52px;
}
.gg-card-drawer .gg-message {
min-height: 170px;
}
.gg-card-drawer .gg-card-form {
position: sticky;
top: 190px;
}
.gg-card-drawer .gg-dd-menu {
z-index: 60;
}
.gg-card-drawer .gg-save-card,
.gg-card-drawer .gg-cancel-card {
border-radius: 10px;
}
.gg-card-drawer .gg-save-card:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent,
rgba(255, 255, 255, 0.28),
transparent
);
transform: translateX(-120%);
transition: transform 0.55s ease;
}
.gg-card-drawer .gg-save-card:hover:after {
transform: translateX(120%);
}
body.gg-card-drawer-lock {
overflow: hidden;
}
.gg-card-drawer .gg-error.success {
color: #16833a;
}
@media (max-width: 980px) {
.gg-card-drawer-panel {
width: 100vw;
}
.gg-card-drawer .gg-card-toolbar {
top: 86px;
grid-template-columns: 1fr 1fr;
}
.gg-card-drawer .gg-card-layout {
grid-template-columns: 1fr;
padding: 22px 16px;
}
.gg-card-drawer .gg-card-form {
position: relative;
top: auto;
}
.gg-card-drawer .gg-open-card {
min-height: 410px;
}
.gg-card-drawer .gg-card-page {
min-height: 410px;
}
}
@media (max-width: 620px) {
.gg-drawer-head {
padding: 18px;
}
.gg-drawer-head h2 {
font-size: 22px;
}
.gg-card-drawer .gg-card-toolbar {
position: relative;
top: auto;
grid-template-columns: 1fr;
padding: 16px;
}
.gg-card-drawer .gg-open-card {
grid-template-columns: 1fr;
min-height: 390px;
}
.gg-card-drawer .gg-card-page-left {
display: none;
}
.gg-card-drawer .gg-card-page-right {
min-height: 390px;
clip-path: none;
transform: none;
}
.gg-card-drawer .gg-card-script {
font-size: 23px;
padding: 58px 28px;
}
.gg-card-drawer .gg-dd-menu {
position: fixed;
left: 12px !important;
right: 12px !important;
bottom: 18px;
top: auto !important;
width: auto;
max-height: 56vh;
border-radius: 18px;
}
}
/* === FINAL PATCH: premium checkout-themed drawer card UI === */
.gg-drawer-entry {
margin: 18px 0 8px !important;
}
.gg-drawer-entry .gg-card-accordion {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(220, 33, 146, 0.22) !important;
border-radius: 14px !important;
background: linear-gradient(135deg, #fff 0%, #fffaf2 100%) !important;
box-shadow: 0 12px 28px rgba(155, 45, 145, 0.08) !important;
padding: 14px 16px !important;
color: #6f7b22 !important;
cursor: pointer;
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}
.gg-drawer-entry .gg-card-accordion:hover {
transform: translateY(-1px);
box-shadow: 0 18px 34px rgba(214, 34, 143, 0.14) !important;
border-color: rgba(220, 33, 146, 0.4) !important;
}
.gg-card-icon {
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 10px;
background: linear-gradient(135deg, #e22191, #8b1fb2);
color: #fff;
font-size: 15px;
box-shadow: 0 8px 18px rgba(226, 33, 145, 0.24);
}
.gg-card-accordion strong {
font-size: 13px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.gg-card-status {
font-size: 11px !important;
color: #8d8690 !important;
margin-inline-start: 6px !important;
}
.gg-card-chevron {
margin-inline-start: auto;
font-size: 20px;
color: #8b8b8b;
transition: transform 0.25s ease;
}
.gg-card-accordion[aria-expanded="true"] .gg-card-chevron {
transform: rotate(90deg);
}
.gg-card-drawer {
position: fixed !important;
inset: 0 !important;
z-index: 999999 !important;
display: block !important;
pointer-events: none;
}
.gg-card-drawer[hidden] {
display: none !important;
}
.gg-card-drawer.is-open {
pointer-events: auto;
}
.gg-card-backdrop {
position: absolute !important;
inset: 0 !important;
border: 0 !important;
background: rgba(18, 14, 20, 0.58) !important;
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.3s ease;
}
.gg-card-drawer.is-open .gg-card-backdrop {
opacity: 1;
}
.gg-card-drawer-panel {
position: absolute !important;
top: 0 !important;
right: 0 !important;
height: 100dvh !important;
width: min(1120px, 94vw) !important;
max-width: 100vw !important;
overflow: auto !important;
background: linear-gradient(180deg, #fff 0%, #fff7fc 100%) !important;
box-shadow: -28px 0 80px rgba(40, 10, 37, 0.28) !important;
transform: translateX(104%) !important;
transition: transform 0.36s cubic-bezier(0.2, 0.85, 0.25, 1) !important;
padding-bottom: 30px;
overscroll-behavior: contain;
}
.gg-card-drawer.is-open .gg-card-drawer-panel {
transform: translateX(0) !important;
}
html[dir="rtl"] .gg-card-drawer-panel {
right: auto !important;
left: 0 !important;
transform: translateX(-104%) !important;
}
html[dir="rtl"] .gg-card-drawer.is-open .gg-card-drawer-panel {
transform: translateX(0) !important;
}
.gg-drawer-head {
position: sticky !important;
top: 0 !important;
z-index: 40 !important;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 20px 24px !important;
background: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(226, 33, 145, 0.16) !important;
}
.gg-drawer-kicker {
color: #e22191 !important;
font-size: 11px !important;
font-weight: 900;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.gg-drawer-head h2 {
margin: 4px 0 4px !important;
font-size: 25px !important;
color: #20202a !important;
}
.gg-drawer-head p {
margin: 0 !important;
color: #786f79 !important;
font-size: 14px !important;
}
.gg-drawer-close {
flex: 0 0 auto;
width: 42px !important;
height: 42px !important;
border: 0 !important;
border-radius: 50% !important;
background: #f8ecf5 !important;
color: #3b3038 !important;
font-size: 28px !important;
line-height: 1 !important;
cursor: pointer;
}
.gg-drawer-close:hover {
background: linear-gradient(135deg, #e22191, #8b1fb2) !important;
color: #fff !important;
}
.gg-card-drawer .gg-card-toolbar {
position: sticky !important;
top: 84px !important;
z-index: 35 !important;
display: grid !important;
grid-template-columns:
minmax(180px, 260px) minmax(230px, 330px) minmax(120px, 180px)
minmax(120px, 180px) !important;
gap: 14px !important;
align-items: end !important;
padding: 14px 24px 18px !important;
background: linear-gradient(135deg, #e22191 0%, #8b1fb2 100%) !important;
box-shadow: 0 12px 28px rgba(139, 31, 178, 0.18) !important;
}
.gg-card-drawer .gg-dd label {
display: block !important;
color: #fff !important;
font-size: 12px !important;
font-weight: 900 !important;
text-transform: uppercase !important;
margin: 0 0 7px !important;
}
.gg-card-drawer .gg-dd-btn {
height: 46px !important;
border: 0 !important;
border-radius: 10px !important;
background: #fff !important;
color: #20202a !important;
font-weight: 800 !important;
padding: 0 14px !important;
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08) !important;
}
.gg-card-drawer .gg-dd-menu {
z-index: 80 !important;
border-radius: 12px !important;
border: 1px solid #f0d4e7 !important;
box-shadow: 0 18px 40px rgba(54, 20, 52, 0.18) !important;
}
.gg-card-drawer .gg-dd-option {
font-size: 15px !important;
}
.gg-card-drawer .gg-dd-option:hover,
.gg-card-drawer .gg-dd-option[aria-selected="true"] {
background: #fff1f8 !important;
}
.gg-save-card,
.gg-cancel-card {
height: 46px !important;
border-radius: 10px !important;
font-size: 15px !important;
}
.gg-save-card {
background: linear-gradient(135deg, #ff8a22, #e22191) !important;
color: #fff !important;
box-shadow: 0 12px 24px rgba(226, 33, 145, 0.22) !important;
}
.gg-cancel-card {
background: #fff !important;
color: #5f5962 !important;
}
.gg-card-drawer .gg-card-layout {
display: grid !important;
grid-template-columns: minmax(480px, 1.35fr) minmax(300px, 0.85fr) !important;
gap: 22px !important;
padding: 26px 24px 0 !important;
align-items: start;
}
.gg-card-drawer .gg-open-card {
min-height: 470px !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
filter: drop-shadow(0 22px 25px rgba(28, 18, 26, 0.22)) !important;
}
.gg-card-page {
background: #fff !important;
}
.gg-card-drawer .gg-card-page {
min-height: 470px !important;
}
.gg-card-page-left {
background: linear-gradient(120deg, #fff, #f9f7f7) !important;
}
.gg-card-art {
background:
radial-gradient(
circle at 25% 22%,
rgba(226, 33, 145, 0.18),
transparent 34%
),
radial-gradient(
circle at 78% 80%,
rgba(255, 138, 34, 0.16),
transparent 32%
),
linear-gradient(145deg, #fff, #fff8fc) !important;
}
.gg-card-art strong {
color: #e22191 !important;
}
.gg-card-art span {
color: #8b1fb2 !important;
}
.gg-card-drawer .gg-card-script {
font-size: 27px !important;
padding: 62px 42px !important;
}
.gg-card-drawer .gg-message {
min-height: 160px !important;
}
.gg-card-form {
border: 1px solid rgba(226, 33, 145, 0.16) !important;
border-radius: 18px !important;
background: #fff !important;
box-shadow: 0 14px 34px rgba(155, 45, 145, 0.1) !important;
}
.gg-card-form h3 {
color: #20202a !important;
}
.gg-card-form label span {
color: #8b1fb2 !important;
}
.gg-card-form input,
.gg-card-form textarea {
border: 1px solid #ead8e5 !important;
border-radius: 12px !important;
background: #fff !important;
}
.gg-card-form input:focus,
.gg-card-form textarea:focus {
border-color: #e22191 !important;
box-shadow: 0 0 0 4px rgba(226, 33, 145, 0.12) !important;
}
.gg-error.success {
color: #16833a !important;
}
.dirham-icon,
.gg-aed-symbol img {
display: inline-block !important;
width: 13px !important;
height: 13px !important;
max-width: 13px !important;
max-height: 13px !important;
object-fit: contain !important;
vertical-align: -1px !important;
margin-inline-end: 3px !important;
}
.gg-money,
.dirham-price {
display: inline-flex !important;
align-items: center !important;
gap: 3px !important;
white-space: nowrap !important;
}
.gg-currency-symbol {
display: inline-flex !important;
align-items: center !important;
}
body.gg-card-drawer-lock {
overflow: hidden !important;
}
@media (max-width: 980px) {
.gg-card-drawer-panel {
width: 100vw !important;
}
.gg-card-drawer .gg-card-toolbar {
top: 78px !important;
grid-template-columns: 1fr 1fr !important;
}
.gg-card-drawer .gg-card-layout {
grid-template-columns: 1fr !important;
padding: 20px 16px 0 !important;
}
.gg-card-form {
position: relative !important;
top: auto !important;
}
.gg-card-drawer .gg-open-card {
min-height: 400px !important;
}
.gg-card-drawer .gg-card-page {
min-height: 400px !important;
}
.gg-drawer-head h2 {
font-size: 22px !important;
}
}
@media (max-width: 640px) {
.gg-drawer-entry .gg-card-accordion {
min-height: 58px !important;
padding: 12px !important;
}
.gg-card-status {
display: none !important;
}
.gg-drawer-head {
padding: 16px !important;
}
.gg-drawer-head p {
display: none !important;
}
.gg-card-drawer .gg-card-toolbar {
position: relative !important;
top: auto !important;
grid-template-columns: 1fr !important;
padding: 14px !important;
gap: 10px !important;
}
.gg-card-drawer .gg-card-layout {
padding: 16px 12px 0 !important;
}
.gg-card-drawer .gg-open-card {
grid-template-columns: 1fr !important;
min-height: 360px !important;
}
.gg-card-drawer .gg-card-page-left {
display: none !important;
}
.gg-card-drawer .gg-card-page-right {
min-height: 360px !important;
clip-path: none !important;
transform: none !important;
}
.gg-card-drawer .gg-card-script {
font-size: 22px !important;
padding: 50px 24px !important;
}
.gg-form-grid {
grid-template-columns: 1fr !important;
}
.gg-card-drawer .gg-dd-menu {
position: fixed !important;
left: 12px !important;
right: 12px !important;
bottom: 14px !important;
top: auto !important;
width: auto !important;
max-height: 58vh !important;
border-radius: 18px !important;
}
.gg-save-card,
.gg-cancel-card {
width: 100% !important;
}
}
@media (max-width: 420px) {
.gg-drawer-head h2 {
font-size: 20px !important;
}
.gg-card-drawer .gg-card-script {
font-size: 20px !important;
padding: 46px 20px !important;
}
.gg-card-drawer .gg-open-card,
.gg-card-drawer .gg-card-page-right {
min-height: 330px !important;
}
}
/* === PREMIUM ANIMATION VERSION: gift-card drawer, book card, microinteractions === */
:root {
--gg-premium-pink: #e22191;
--gg-premium-violet: #8b1fb2;
--gg-premium-orange: #ff8a22;
--gg-premium-ink: #211926;
--gg-premium-soft: #fff7fc;
--gg-premium-line: rgba(226, 33, 145, 0.18);
}
.gg-drawer-entry .gg-card-accordion {
position: relative !important;
isolation: isolate;
overflow: hidden;
}
.gg-drawer-entry .gg-card-accordion:before {
content: "";
position: absolute;
inset: -2px;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.9) 38%,
transparent 70%
);
transform: translateX(-130%) skewX(-18deg);
transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: -1;
}
.gg-drawer-entry .gg-card-accordion:hover:before {
transform: translateX(130%) skewX(-18deg);
}
.gg-card-drawer.is-open .gg-card-backdrop {
animation: ggBackdropBloom 0.45s ease both;
}
@keyframes ggBackdropBloom {
from {
opacity: 0;
backdrop-filter: blur(0);
}
to {
opacity: 1;
backdrop-filter: blur(12px);
}
}
.gg-card-drawer-panel {
transform: translateX(104%) scale(0.985) !important;
will-change: transform;
}
.gg-card-drawer.is-open .gg-card-drawer-panel {
animation: ggDrawerArrive 0.52s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
html[dir="rtl"] .gg-card-drawer-panel {
transform: translateX(-104%) scale(0.985) !important;
}
html[dir="rtl"] .gg-card-drawer.is-open .gg-card-drawer-panel {
animation: ggDrawerArriveRtl 0.52s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes ggDrawerArrive {
0% {
transform: translateX(104%) scale(0.985);
filter: blur(2px);
}
72% {
transform: translateX(-1.2%) scale(1);
filter: blur(0);
}
100% {
transform: translateX(0) scale(1);
filter: blur(0);
}
}
@keyframes ggDrawerArriveRtl {
0% {
transform: translateX(-104%) scale(0.985);
filter: blur(2px);
}
72% {
transform: translateX(1.2%) scale(1);
filter: blur(0);
}
100% {
transform: translateX(0) scale(1);
filter: blur(0);
}
}
.gg-drawer-head {
overflow: hidden;
box-shadow:
0 1px 0 rgba(226, 33, 145, 0.1),
0 14px 38px rgba(226, 33, 145, 0.07) !important;
}
.gg-drawer-head:before {
content: "";
position: absolute;
width: 260px;
height: 260px;
inset-block-start: -180px;
inset-inline-end: 80px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(226, 33, 145, 0.18),
transparent 68%
);
pointer-events: none;
}
.gg-card-drawer.is-open .gg-drawer-head > * {
animation: ggFadeRise 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.gg-card-drawer.is-open .gg-card-toolbar > * {
animation: ggFadeRise 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.gg-card-drawer.is-open .gg-card-toolbar > *:nth-child(1) {
animation-delay: 0.05s;
}
.gg-card-drawer.is-open .gg-card-toolbar > *:nth-child(2) {
animation-delay: 0.1s;
}
.gg-card-drawer.is-open .gg-card-toolbar > *:nth-child(3) {
animation-delay: 0.15s;
}
.gg-card-drawer.is-open .gg-card-toolbar > *:nth-child(4) {
animation-delay: 0.2s;
}
@keyframes ggFadeRise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.gg-card-drawer .gg-card-layout {
perspective: 1600px !important;
}
.gg-card-drawer .gg-open-card {
transform-style: preserve-3d;
opacity: 0;
}
.gg-card-drawer.is-open .gg-open-card {
animation: ggBookReveal 0.82s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both !important;
}
@keyframes ggBookReveal {
0% {
opacity: 0;
transform: translateY(28px) rotateX(12deg) scale(0.94);
}
55% {
opacity: 1;
transform: translateY(-3px) rotateX(0) scale(1.01);
}
100% {
opacity: 1;
transform: translateY(0) rotateX(0) scale(1);
}
}
.gg-card-drawer.is-open .gg-card-page-left {
animation: ggLeftPageOpen 0.9s cubic-bezier(0.18, 0.9, 0.22, 1) 0.22s both !important;
}
.gg-card-drawer.is-open .gg-card-page-right {
animation: ggRightPageSettle 0.78s cubic-bezier(0.18, 0.9, 0.22, 1) 0.24s both !important;
}
@keyframes ggLeftPageOpen {
0% {
transform: rotateY(52deg) translateX(16px);
filter: brightness(0.96);
}
68% {
transform: rotateY(1deg) translateX(0);
filter: brightness(1);
}
100% {
transform: rotateY(5deg);
filter: brightness(1);
}
}
@keyframes ggRightPageSettle {
0% {
transform: rotateY(-18deg) translateX(-10px);
filter: brightness(0.98);
}
100% {
transform: rotateY(-3deg) translateX(0);
filter: brightness(1);
}
}
.gg-card-page-right:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
transparent 8%,
rgba(255, 255, 255, 0.8) 38%,
transparent 58%
);
transform: translateX(-120%);
opacity: 0.8;
pointer-events: none;
}
.gg-card-drawer.is-open .gg-card-page-right:after {
animation: ggPaperGlint 1.15s ease 0.58s both;
}
@keyframes ggPaperGlint {
to {
transform: translateX(120%);
}
}
.gg-card-art {
position: relative;
overflow: hidden;
}
.gg-card-art:before,
.gg-card-art:after {
content: "✦";
position: absolute;
color: rgba(226, 33, 145, 0.36);
font-size: 28px;
animation: ggFloatWish 4.8s ease-in-out infinite;
}
.gg-card-art:before {
inset-block-start: 20%;
inset-inline-start: 18%;
}
.gg-card-art:after {
inset-block-end: 24%;
inset-inline-end: 18%;
animation-delay: 1.2s;
color: rgba(255, 138, 34, 0.38);
}
@keyframes ggFloatWish {
0%,
100% {
transform: translateY(0) rotate(0);
opacity: 0.45;
}
50% {
transform: translateY(-16px) rotate(16deg);
opacity: 0.9;
}
}
.gg-card-drawer .gg-card-script.swap {
animation: ggInkWrite 0.38s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes ggInkWrite {
0% {
opacity: 0.1;
transform: translateY(10px) scale(0.985);
filter: blur(2px);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
filter: blur(0);
}
}
.gg-card-form {
transform: translateY(18px);
opacity: 0;
}
.gg-card-drawer.is-open .gg-card-form {
animation: ggFormArrive 0.58s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both !important;
}
@keyframes ggFormArrive {
to {
transform: translateY(0);
opacity: 1;
}
}
.gg-card-form input,
.gg-card-form textarea,
.gg-dd-btn {
transition:
border-color 0.22s ease,
box-shadow 0.22s ease,
transform 0.22s ease,
background 0.22s ease !important;
}
.gg-card-form input:focus,
.gg-card-form textarea:focus,
.gg-dd-btn:focus-visible {
transform: translateY(-1px);
}
.gg-save-card {
isolation: isolate;
overflow: hidden !important;
position: relative !important;
}
.gg-save-card:before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255, 255, 255, 0.42) 45%,
transparent 72%
);
transform: translateX(-120%) skewX(-18deg);
transition: transform 0.65s ease;
z-index: -1;
}
.gg-save-card:hover:before {
transform: translateX(120%) skewX(-18deg);
}
.gg-save-card.saved-pop {
animation: ggSavedPop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes ggSavedPop {
0% {
transform: scale(1);
}
45% {
transform: scale(1.045);
}
100% {
transform: scale(1);
}
}
.gg-premium-confetti {
position: fixed;
width: 8px;
height: 12px;
border-radius: 3px;
background: var(--gg-premium-pink);
z-index: 1000000;
pointer-events: none;
animation: ggConfettiFall 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.gg-premium-confetti:nth-child(3n) {
background: var(--gg-premium-orange);
}
.gg-premium-confetti:nth-child(4n) {
background: var(--gg-premium-violet);
}
@keyframes ggConfettiFall {
0% {
opacity: 1;
transform: translate3d(0, 0, 0) rotate(0);
}
100% {
opacity: 0;
transform: translate3d(var(--x, 20px), var(--y, 90px), 0) rotate(220deg);
}
}
@media (prefers-reduced-motion: reduce) {
.gg-card-drawer *,
.gg-drawer-entry .gg-card-accordion:before {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
@media (max-width: 640px) {
.gg-card-drawer.is-open .gg-card-page-right {
animation: ggBookReveal 0.48s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
.gg-card-art:before,
.gg-card-art:after {
display: none;
}
.gg-drawer-head:before {
display: none;
}
}
/* V8 category nav visibility fix */
.navbar .container {
gap: 28px;
align-items: center;
overflow-x: auto;
padding: 0 4px;
}
.navbar a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
white-space: nowrap;
flex: 0 0 auto;
}
.navbar .nav-pill {
min-width: 112px;
padding: 10px 18px;
border-radius: 999px;
background: linear-gradient(135deg, #f62780, #8a1978) !important;
color: #fff !important;
box-shadow: 0 8px 22px rgba(246, 39, 128, 0.22);
overflow: visible;
}
/* === V9 Clean Final: category bar, events, drawers, AI assistant fixes === */
.navbar .container {
display: flex !important;
align-items: center !important;
gap: 24px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-padding-left: 16px !important;
padding: 0 4px !important;
}
.navbar a {
flex: 0 0 auto !important;
white-space: nowrap !important;
min-width: max-content !important;
}
.navbar .nav-pill {
min-width: max-content !important;
max-width: none !important;
overflow: visible !important;
text-overflow: clip !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
.events-shell .ai-panel {
display: none !important;
}
.events-page-head {
padding: 54px 0 32px !important;
background:
radial-gradient(circle at 8% 0, rgba(246, 39, 128, 0.14), transparent 28%),
linear-gradient(135deg, #fff8fb, #fff) !important;
border-bottom: 1px solid var(--gg-border) !important;
}
.events-page-head h1 {
max-width: 860px;
margin: 14px 0 10px;
font-size: clamp(34px, 4vw, 58px);
line-height: 1.04;
letter-spacing: -0.045em;
color: #231523;
}
.events-page-head p {
max-width: 840px;
font-size: 18px;
line-height: 1.7;
color: #6e6170;
}
.event-search-panel {
margin-top: 24px !important;
}
.events-layout {
margin-top: 26px !important;
}
.service-group {
border: 1px solid #f1d4e0 !important;
border-radius: 20px !important;
overflow: hidden !important;
background: #fff !important;
box-shadow: 0 12px 35px rgba(80, 22, 58, 0.06) !important;
}
.service-group h4 {
cursor: pointer !important;
user-select: none !important;
margin: 0 !important;
padding: 16px 18px !important;
background: linear-gradient(90deg, #fff1f7, #fff) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
font-size: 16px !important;
font-weight: 900 !important;
color: #4c2a40 !important;
}
.service-group h4 span {
flex: 0 0 30px !important;
width: 30px !important;
height: 30px !important;
display: grid !important;
place-items: center !important;
border-radius: 999px !important;
background: #fff !important;
border: 1px solid #f1d4e0 !important;
transition: transform 0.2s ease !important;
}
.service-group.collapsed h4 span {
transform: rotate(180deg) !important;
}
.service-options {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 14px !important;
padding: 16px !important;
background: #fff9fc !important;
}
.service-group.collapsed .service-options {
display: none !important;
}
.service-tile {
min-width: 0 !important;
position: relative !important;
display: flex !important;
flex-direction: column !important;
gap: 9px !important;
min-height: 178px !important;
padding: 10px !important;
border-radius: 18px !important;
border: 1px solid #f2d5e1 !important;
background: #fff !important;
}
.service-tile img {
width: 100% !important;
height: 92px !important;
object-fit: cover !important;
border-radius: 14px !important;
}
.service-tile span {
min-width: 0 !important;
}
.service-tile strong {
display: block !important;
font-size: 14px !important;
line-height: 1.25 !important;
color: #2a1725 !important;
}
.service-tile small {
display: block !important;
margin-top: 3px !important;
color: #7b6e78 !important;
font-weight: 800 !important;
}
.service-tile input {
position: absolute !important;
top: 12px !important;
right: 12px !important;
width: 18px !important;
height: 18px !important;
accent-color: #f62780 !important;
}
.service-tile.selected {
border-color: #f62780 !important;
box-shadow: 0 12px 30px rgba(246, 39, 128, 0.14) !important;
background: #fff4f9 !important;
}
/* AI assistant suggested-results overlap fix */
.page-two-col {
grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr) !important;
align-items: start !important;
}
.page-two-col > * {
min-width: 0 !important;
}
.result-card {
display: grid !important;
grid-template-columns: 84px minmax(0, 1fr) max-content !important;
align-items: center !important;
gap: 16px !important;
padding: 16px !important;
overflow: hidden !important;
}
.result-card .thumb {
width: 84px !important;
height: 84px !important;
min-width: 84px !important;
border-radius: 16px !important;
overflow: hidden !important;
}
.result-card strong {
display: block !important;
min-width: 0 !important;
overflow-wrap: anywhere !important;
line-height: 1.2 !important;
}
.result-card .dirham-price {
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
gap: 2px !important;
}
@media (max-width: 900px) {
.page-two-col {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 720px) {
.navbar .container {
gap: 18px !important;
}
.events-page-head {
padding: 38px 0 24px !important;
}
.service-options {
grid-template-columns: 1fr !important;
}
.result-card {
grid-template-columns: 72px minmax(0, 1fr) !important;
gap: 12px !important;
}
.result-card .thumb {
width: 72px !important;
height: 72px !important;
min-width: 72px !important;
}
.result-card > div:last-child {
grid-column: 2 !important;
justify-self: start !important;
margin-top: 4px !important;
}
}
/* V12 home + payment flow polish */
.page-two-col {
align-items: stretch !important;
gap: 22px !important;
overflow: hidden;
}
.subscription-promo-panel,
.home-event-planner-panel {
min-width: 0;
overflow: hidden;
}
.subscription-promo-panel {
display: grid !important;
grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) !important;
gap: 24px !important;
padding: 32px !important;
}
.sub-promo-content {
min-width: 0;
}
.sub-promo-content h2,
.home-event-planner-panel h2 {
overflow-wrap: anywhere;
text-wrap: balance;
}
.sub-plans-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(130px, 1fr)) !important;
gap: 14px !important;
}
.sub-plan-card {
min-width: 0 !important;
width: 100% !important;
padding: 18px 12px !important;
}
.home-event-planner-panel {
padding: 32px !important;
}
.home-planner-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 18px 0;
}
.home-planner-grid a {
display: flex;
flex-direction: column;
gap: 7px;
padding: 16px;
min-height: 102px;
border: 1px solid rgba(218, 28, 129, 0.16);
border-radius: 22px;
background: linear-gradient(180deg, #fff, rgba(255, 246, 251, 0.92));
color: var(--text);
text-decoration: none;
box-shadow: 0 12px 28px rgba(70, 22, 70, 0.06);
}
.home-planner-grid a:hover {
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(218, 28, 129, 0.12);
}
.home-planner-grid strong {
font-size: 15px;
line-height: 1.25;
}
.home-planner-grid small {
color: #756b7e;
line-height: 1.45;
}
.home-planner-note {
border-radius: 18px;
padding: 14px 16px;
background: #fff4fa;
color: #6f6476;
border: 1px dashed rgba(218, 28, 129, 0.25);
margin-bottom: 18px;
}
.payment-shell {
padding: 44px 0 70px;
background: linear-gradient(180deg, #fff 0%, #fff7fb 100%);
}
.payment-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
gap: 22px;
align-items: start;
}
.payment-card,
.thankyou-card {
background: #fff;
border: 1px solid rgba(218, 28, 129, 0.16);
border-radius: 30px;
box-shadow: 0 24px 60px rgba(70, 22, 70, 0.08);
padding: 28px;
}
.checkout-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin: 0 0 22px;
}
.checkout-steps span {
padding: 12px;
border-radius: 999px;
background: #fff1f8;
color: #7a6175;
text-align: center;
font-weight: 800;
font-size: 13px;
}
.checkout-steps span.active {
background: linear-gradient(135deg, #f62780, #6b1699);
color: #fff;
}
.payment-options {
display: grid;
gap: 14px;
margin: 20px 0;
}
.payment-option {
display: flex;
align-items: flex-start;
gap: 14px;
border: 1px solid rgba(218, 28, 129, 0.16);
border-radius: 22px;
padding: 16px;
background: #fff;
cursor: pointer;
}
.payment-option input {
margin-top: 4px;
accent-color: #da1c81;
}
.payment-option strong {
display: block;
margin-bottom: 4px;
}
.payment-option small {
color: #756b7e;
line-height: 1.45;
}
.card-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 12px;
}
.card-fields label {
display: flex;
flex-direction: column;
gap: 7px;
font-weight: 800;
color: #2a2130;
}
.card-fields input {
height: 48px;
border: 1px solid rgba(218, 28, 129, 0.18);
border-radius: 16px;
padding: 0 14px;
font: inherit;
}
.order-summary-box {
display: grid;
gap: 12px;
}
.summary-line {
display: flex;
justify-content: space-between;
gap: 12px;
color: #706577;
}
.summary-line.total {
font-weight: 900;
font-size: 20px;
color: #201728;
border-top: 1px solid rgba(218, 28, 129, 0.14);
padding-top: 14px;
margin-top: 4px;
}
.secure-note {
margin-top: 16px;
border-radius: 18px;
background: #f7fff8;
border: 1px solid rgba(20, 160, 90, 0.15);
padding: 14px;
color: #33624a;
}
.thankyou-wrap {
padding: 54px 0 80px;
background: linear-gradient(180deg, #fff 0%, #fff6fb 100%);
}
.thankyou-card {
max-width: 940px;
margin: 0 auto;
text-align: center;
}
.thankyou-badge {
width: 74px;
height: 74px;
border-radius: 24px;
display: grid;
place-items: center;
margin: 0 auto 18px;
background: linear-gradient(135deg, #f62780, #6b1699);
color: #fff;
font-size: 34px;
box-shadow: 0 18px 38px rgba(218, 28, 129, 0.26);
}
.tracking-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 26px 0;
text-align: left;
}
.tracking-details div {
border: 1px solid rgba(218, 28, 129, 0.14);
border-radius: 20px;
padding: 16px;
background: #fff9fc;
}
.tracking-details small {
display: block;
color: #756b7e;
margin-bottom: 6px;
}
.tracking-details strong {
display: block;
color: #211727;
}
.order-timeline {
display: grid;
gap: 12px;
text-align: left;
margin: 24px 0;
}
.order-timeline span {
display: flex;
gap: 12px;
align-items: center;
padding: 13px 15px;
border-radius: 18px;
background: #fff;
border: 1px solid rgba(218, 28, 129, 0.12);
}
.order-timeline b {
width: 28px;
height: 28px;
border-radius: 50%;
display: grid;
place-items: center;
background: #fff1f8;
color: #da1c81;
}
@media (max-width: 1100px) {
.page-two-col {
grid-template-columns: 1fr !important;
}
.subscription-promo-panel {
grid-template-columns: 240px 1fr !important;
}
}
@media (max-width: 720px) {
.subscription-promo-panel {
grid-template-columns: 1fr !important;
padding: 20px !important;
}
.sub-promo-image img {
max-height: 260px;
object-fit: cover;
}
.sub-plans-grid,
.home-planner-grid,
.payment-grid,
.tracking-details,
.card-fields {
grid-template-columns: 1fr !important;
}
.home-event-planner-panel,
.payment-card,
.thankyou-card {
padding: 20px !important;
}
.checkout-steps {
grid-template-columns: 1fr;
}
}
/* V13 homepage alignment patch: keep subscription and events tidy */
.home-feature-split {
display: grid !important;
grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr) !important;
gap: 22px !important;
align-items: stretch !important;
}
.home-feature-split > .panel {
min-width: 0 !important;
height: 100% !important;
overflow: hidden !important;
}
.home-feature-split .subscription-promo-panel {
display: grid !important;
grid-template-columns: minmax(210px, 300px) minmax(0, 1fr) !important;
gap: 28px !important;
padding: 32px !important;
align-items: center !important;
}
.home-feature-split .sub-promo-image img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1/1 !important;
object-fit: cover !important;
border-radius: 22px !important;
}
.home-feature-split .sub-promo-content {
min-width: 0 !important;
overflow: hidden !important;
}
.home-feature-split .sub-promo-content h2 {
max-width: 360px !important;
}
.home-feature-split .sub-promo-content p {
max-width: 430px !important;
overflow: visible !important;
}
.home-feature-split .sub-plans-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(124px, 1fr)) !important;
gap: 14px !important;
max-width: 350px !important;
}
.home-feature-split .sub-plan-card {
min-width: 0 !important;
padding: 17px 12px !important;
border-radius: 18px !important;
}
.home-event-planner-panel {
padding: 32px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.home-event-copy .badge-pill {
margin-bottom: 12px !important;
}
.home-event-copy h2 {
margin: 0 0 10px !important;
font-size: clamp(25px, 2.35vw, 34px) !important;
line-height: 1.12 !important;
letter-spacing: -0.04em !important;
color: #201728 !important;
overflow-wrap: normal !important;
}
.home-event-copy p {
margin: 0 !important;
color: #746b7c !important;
font-size: clamp(15px, 1.35vw, 20px) !important;
line-height: 1.5 !important;
max-width: 650px !important;
}
.home-planner-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
margin: 20px 0 16px !important;
}
.home-planner-grid a {
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
grid-template-rows: auto auto !important;
column-gap: 12px !important;
row-gap: 3px !important;
align-items: center !important;
min-height: 96px !important;
padding: 15px !important;
border-radius: 22px !important;
text-align: left !important;
text-decoration: none !important;
}
.home-planner-grid a > span {
grid-row: 1 / span 2 !important;
width: 38px !important;
height: 38px !important;
display: grid !important;
place-items: center !important;
border-radius: 14px !important;
background: #fff1f8 !important;
font-size: 20px !important;
}
.home-planner-grid strong {
display: block !important;
font-size: 15px !important;
line-height: 1.2 !important;
white-space: normal !important;
}
.home-planner-grid small {
display: block !important;
font-size: 13px !important;
line-height: 1.35 !important;
color: #756b7e !important;
}
.home-planner-note {
font-size: 15px !important;
line-height: 1.55 !important;
margin: 0 0 18px !important;
}
.home-event-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
align-items: center !important;
}
.home-event-actions .btn {
min-width: 184px !important;
justify-content: center !important;
}
.navbar .container a[href="events.html"] {
order: 99 !important;
}
@media (max-width: 1180px) {
.home-feature-split {
grid-template-columns: 1fr !important;
}
.home-feature-split .subscription-promo-panel {
grid-template-columns: 260px minmax(0, 1fr) !important;
}
.home-feature-split .sub-plans-grid {
grid-template-columns: repeat(4, minmax(110px, 1fr)) !important;
max-width: none !important;
}
}
@media (max-width: 760px) {
.home-feature-split {
gap: 16px !important;
}
.home-feature-split .subscription-promo-panel {
grid-template-columns: 1fr !important;
padding: 20px !important;
}
.home-feature-split .sub-plans-grid,
.home-planner-grid {
grid-template-columns: 1fr !important;
}
.home-event-planner-panel {
padding: 20px !important;
}
.home-event-actions .btn {
width: 100% !important;
}
}
/* V14 cake polish */
.cake-card-v14 .product-thumb {
background: #fff;
aspect-ratio: 1/1;
border-radius: 18px;
overflow: hidden;
display: block;
}
.cake-card-v14 .cake-photo-v14 {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.35s ease;
}
.cake-card-v14:hover .cake-photo-v14 {
transform: scale(1.045);
}
.cake-card-v14 h4 {
min-height: 40px;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cake-card-v14 .tiny-badge {
right: 10px;
bottom: 10px;
top: auto;
background: #fff;
color: #e11b74;
border: 1px solid #ffd6e8;
box-shadow: 0 10px 22px rgba(226, 25, 120, 0.16);
font-size: 10px;
font-weight: 900;
}
.cake-main-v14 {
object-fit: cover !important;
background: #fff;
border-radius: 24px;
}
.cake-price-box-v14 {
border: 1px solid #ecd6e4;
border-radius: 16px;
padding: 16px 18px;
background: #fff;
box-shadow: 0 14px 30px rgba(147, 35, 120, 0.06);
}
.cake-message-box-v14 {
display: block;
margin: 14px 0 18px;
padding: 14px 16px;
border: 1px solid #ffd173;
background: #fff9e9;
border-radius: 16px;
color: #7b4a04;
font-weight: 800;
}
.cake-message-box-v14 span {
display: block;
margin-bottom: 9px;
font-size: 13px;
}
.cake-message-box-v14 input {
width: 100%;
height: 44px;
border: 1px solid #ffc84d;
border-radius: 10px;
padding: 0 13px;
background: #fff;
font: inherit;
color: #1f1830;
outline: none;
}
.cake-message-box-v14 input:focus {
box-shadow: 0 0 0 4px rgba(246, 39, 128, 0.12);
border-color: #f62780;
}
.cake-variant-v14 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.cake-variant-v14 .variant-card {
text-decoration: none;
color: inherit;
min-height: 112px;
}
.cake-variant-v14 .thumb img {
object-fit: cover;
border-radius: 12px;
}
.cake-payments-v14 {
margin: 12px 0 18px;
padding: 13px 15px;
border: 1px solid #d9edf0;
border-radius: 14px;
background: linear-gradient(90deg, #fff, #f5fffb);
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
color: #34283a;
}
.cake-payments-v14 span {
color: #72697b;
font-size: 13px;
}
@media (max-width: 760px) {
.cake-variant-v14 {
grid-template-columns: 1fr;
}
.cake-payments-v14 {
display: block;
}
.cake-payments-v14 span {
display: block;
margin-top: 6px;
}
}
/* === V15 verified cake styles === */
.cake-category-page .listing-layout {
align-items: start;
}
.cake-category-page .sortbar {
background: linear-gradient(135deg, #fff, #fff7fb);
border: 1px solid #f2d2e6;
border-radius: 24px;
padding: 20px 24px;
box-shadow: 0 16px 40px rgba(143, 34, 112, 0.08);
margin-bottom: 18px;
}
.cake-card-v15 {
position: relative;
overflow: hidden;
border: 1px solid #eee3ec;
border-radius: 18px;
background: #fff;
box-shadow: 0 12px 26px rgba(61, 26, 52, 0.06);
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.cake-card-v15:hover {
transform: translateY(-4px);
box-shadow: 0 20px 42px rgba(118, 27, 97, 0.13);
}
.cake-thumb-wrap {
aspect-ratio: 1/1;
background: #fff8fc;
border-bottom: 1px solid #f4e2ee;
}
.cake-card-v15 .product-thumb {
display: block;
width: 100%;
height: 100%;
border-radius: 16px;
overflow: hidden;
}
.cake-img-v15 {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
border-radius: 16px !important;
display: block !important;
transition: transform 0.35s ease;
}
.cake-card-v15:hover .cake-img-v15 {
transform: scale(1.045);
}
.cake-card-v15 h4 {
min-height: 42px;
line-height: 1.25;
margin: 12px 12px 8px;
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cake-card-v15 .price {
margin: 0 12px 4px;
font-weight: 900;
color: #6d1b8f;
}
.cake-card-v15 .meta {
margin: 0 12px 12px;
font-size: 11px;
color: #564d5e;
}
.cake-quick-add {
margin: 0 12px 14px;
width: calc(100% - 24px);
border: 0;
border-radius: 14px;
padding: 11px 12px;
background: linear-gradient(135deg, #f72b83, #70148f);
color: #fff;
font-weight: 800;
cursor: pointer;
}
.cake-product-page .product-page {
grid-template-columns: 90px minmax(340px, 1fr) minmax(360px, 0.95fr);
gap: 24px;
align-items: start;
}
.cake-product-page .gallery-rail {
gap: 10px;
}
.cake-product-page .gallery-thumb {
border: 1px solid #ead8e6;
background: #fff;
border-radius: 14px;
padding: 5px;
cursor: pointer;
}
.cake-product-page .gallery-thumb.active {
border-color: #c31985;
box-shadow: 0 10px 26px rgba(195, 25, 133, 0.16);
}
.cake-product-page .gallery-photo {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.cake-product-page .visual-wrap {
background: linear-gradient(135deg, #fff, #fff7fb);
border: 1px solid #ead8e6;
border-radius: 24px;
box-shadow: 0 18px 48px rgba(64, 24, 54, 0.08);
overflow: hidden;
}
.cake-main-v15 {
width: 100%;
height: 100%;
min-height: 480px;
object-fit: cover;
border-radius: 22px;
}
.cake-price-box-v15 {
border: 1px solid #ead8e6;
border-radius: 16px;
padding: 14px 16px;
background: #fff;
box-shadow: 0 10px 28px rgba(83, 30, 72, 0.05);
}
.cake-price-box-v15 .amount {
font-size: 28px;
font-weight: 950;
color: #17121f;
}
.cake-message-box-v15 {
display: block;
margin: 14px 0;
padding: 14px;
border: 1px solid #ffd37a;
background: #fff8e8;
border-radius: 14px;
}
.cake-message-box-v15 span {
display: block;
font-size: 12px;
color: #8a5d00;
font-weight: 800;
margin-bottom: 8px;
}
.cake-message-box-v15 input {
width: 100%;
border: 1px solid #ffc33b;
border-radius: 10px;
padding: 12px 14px;
outline: none;
}
.cake-variant-v15 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin: 14px 0;
}
.cake-variant-v15 .variant-card {
display: grid;
grid-template-columns: 64px 1fr;
gap: 10px;
align-items: center;
text-decoration: none;
color: inherit;
border: 1px solid #eddde8;
border-radius: 16px;
padding: 9px;
background: #fff;
}
.cake-variant-v15 .variant-card.active {
border-color: #c31985;
background: #fff7fb;
}
.cake-variant-v15 .thumb {
width: 64px;
height: 64px;
border-radius: 12px;
overflow: hidden;
background: #f8edf5;
}
.cake-variant-v15 img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cake-variant-v15 .variant-name {
font-size: 12px;
font-weight: 800;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cake-payments-v15 {
margin: 14px 0;
padding: 13px 16px;
border: 1px solid #d9ebde;
background: #f5fff8;
border-radius: 14px;
display: grid;
gap: 4px;
}
.cake-payments-v15 span {
color: #625a68;
font-size: 13px;
}
.cake-details-card-v15 {
margin-top: 16px;
padding: 18px;
border: 1px solid #ead8e6;
border-radius: 18px;
background: #fff;
box-shadow: 0 12px 30px rgba(91, 30, 77, 0.06);
}
.cake-details-card-v15 h3 {
margin: 0 0 8px;
}
.cake-details-card-v15 p {
color: #5f5964;
}
.cake-details-card-v15 ul {
margin: 10px 0 0;
padding-left: 18px;
color: #5f5964;
}
@media (max-width: 900px) {
.cake-product-page .product-page {
grid-template-columns: 1fr;
}
.cake-product-page .gallery-rail {
display: flex;
overflow: auto;
}
.cake-product-page .gallery-thumb {
min-width: 74px;
height: 74px;
}
.cake-main-v15 {
min-height: 320px;
}
.cake-variant-v15 {
grid-template-columns: 1fr;
}
.cake-category-page .listing-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* === V17 cake catalogue visual polish === */
.gg-cake-card-final {
overflow: hidden;
border: 1px solid #eee4f1;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(58, 26, 70, 0.06);
transition: 0.22s ease;
}
.gg-cake-card-final:hover {
transform: translateY(-3px);
box-shadow: 0 14px 34px rgba(58, 26, 70, 0.12);
}
.gg-cake-card-final .thumb-wrap {
position: relative;
aspect-ratio: 1/1;
background: #fbf8fc;
border-radius: 16px 16px 0 0;
overflow: hidden;
}
.gg-cake-card-final .tag {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
background: #fff;
border: 1px solid #f0d7ea;
color: #8a2c7b;
border-radius: 999px;
padding: 5px 8px;
font-size: 10px;
font-weight: 800;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.09);
}
.gg-cake-card-final img.cake-photo-final {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.gg-cake-card-final:hover img.cake-photo-final {
transform: scale(1.045);
}
.gg-cake-card-final .product-card-body {
padding: 12px 12px 14px;
}
.gg-cake-card-final h4 {
font-size: 13px;
line-height: 1.25;
margin: 0 0 8px;
color: #27112b;
min-height: 34px;
}
.gg-cake-card-final h4 a {
color: inherit;
text-decoration: none;
}
.gg-cake-card-final .price {
font-weight: 900;
color: #7d2b78;
margin-bottom: 5px;
}
.gg-cake-card-final .meta {
font-size: 11px;
color: #4a3b50;
font-weight: 700;
}
.gg-cake-card-final .cake-actions {
display: flex;
gap: 8px;
margin-top: 10px;
align-items: center;
}
.gg-cake-card-final .mini-view,
.gg-cake-card-final .quick-add {
flex: 1;
border: 0;
border-radius: 10px;
padding: 9px 10px;
font-weight: 800;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.gg-cake-card-final .mini-view {
background: #fff5cc;
color: #6b4b00;
}
.gg-cake-card-final .quick-add {
background: linear-gradient(90deg, #a64b91, #7c2d75);
color: #fff;
}
.cake-product-page-final .gallery-rail {
gap: 10px;
}
.cake-product-page-final .gallery-thumb {
border: 1px solid #eadcec;
background: #fff;
border-radius: 12px;
padding: 4px;
cursor: pointer;
overflow: hidden;
}
.cake-product-page-final .gallery-thumb.active {
border-color: #8a2c7b;
box-shadow: 0 0 0 2px rgba(138, 44, 123, 0.12);
}
.cake-product-page-final .gallery-thumb img {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 9px;
display: block;
}
.cake-product-page-final .cake-main-final {
width: 100%;
height: auto;
max-height: 620px;
object-fit: cover;
border-radius: 18px;
background: #faf7fb;
box-shadow: 0 16px 40px rgba(41, 20, 48, 0.1);
}
.cake-price-box-final {
border: 1px solid #e9ddeb;
border-radius: 12px;
padding: 13px 16px;
background: #fff;
margin: 10px 0 14px;
}
.cake-price-box-final .amount {
font-size: 26px;
font-weight: 950;
color: #111827;
}
.cake-price-box-final .tax {
font-size: 12px;
color: #5d5260;
font-weight: 700;
}
.cake-message-box-final {
display: block;
border: 1px solid #ffd45a;
background: #fff8df;
border-radius: 12px;
padding: 12px;
margin: 0 0 16px;
}
.cake-message-box-final span {
display: block;
font-size: 12px;
font-weight: 800;
color: #9a5a00;
margin-bottom: 8px;
}
.cake-message-box-final input {
width: 100%;
height: 42px;
border: 1px solid #f0b935;
border-radius: 8px;
padding: 0 12px;
background: #fff;
}
.cake-variant-final {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin: 0 0 16px;
}
.cake-variant-final .variant-card {
border: 1px solid #eaddec;
border-radius: 12px;
text-decoration: none;
color: #301334;
background: #fff;
padding: 8px;
min-width: 0;
}
.cake-variant-final .variant-card.active {
border-color: #8a2c7b;
background: #fff7fe;
}
.cake-variant-final img {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 10px;
display: block;
margin-bottom: 6px;
}
.cake-variant-final span {
display: block;
font-size: 11px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cake-variant-final strong {
font-size: 11px;
color: #8a2c7b;
}
.cake-add-final {
width: 100%;
justify-content: center;
margin: 8px 0 10px;
background: linear-gradient(90deg, #ad5a98, #773074) !important;
}
.cake-payments-final {
border: 1px solid #dce7f8;
border-radius: 10px;
padding: 10px 12px;
background: #fff;
display: flex;
gap: 8px;
flex-wrap: wrap;
font-size: 12px;
margin-bottom: 14px;
}
.cake-desc-final {
color: #4d4352;
line-height: 1.65;
margin: 0 0 12px;
}
.cake-promises-final {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.cake-promises-final span {
background: #fff7fe;
border: 1px solid #f1e0ef;
border-radius: 999px;
padding: 9px 10px;
font-size: 12px;
font-weight: 800;
text-align: center;
}
@media (max-width: 760px) {
.cake-variant-final {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cake-promises-final {
grid-template-columns: 1fr;
}
.cake-product-page-final .gallery-thumb img {
width: 54px;
height: 54px;
}
}
/* === V30.3 category hover + compact events hero hotfix === */
:root {
--gg-hover-pink: #f62780;
--gg-hover-purple: #5a1a93;
}
.navbar a,
.navbar .nav-pill,
.side-category-card,
.category-card {
transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease,
background 0.22s ease,
color 0.22s ease !important;
}
.navbar a:hover,
.navbar a:focus-visible,
.navbar .nav-pill:hover,
.navbar .nav-pill:focus-visible {
background: linear-gradient(
135deg,
var(--gg-hover-pink),
var(--gg-hover-purple)
) !important;
color: #fff !important;
border-color: transparent !important;
box-shadow: 0 12px 28px rgba(246, 39, 128, 0.2) !important;
transform: translateY(-1px) !important;
}
.side-category-card:hover,
.side-category-card:focus-visible,
.category-card:hover,
.category-card:focus-within {
border-color: rgba(246, 39, 128, 0.45) !important;
box-shadow: 0 16px 38px rgba(246, 39, 128, 0.14) !important;
background: linear-gradient(145deg, #fff, #fff7fb) !important;
transform: translateY(-4px) !important;
}
body.gg-category-flowers .navbar a[href="listing.html?category=flowers"],
body.gg-category-cakes .navbar a[href="listing.html?category=cakes"],
body.gg-category-personalized
.navbar
a[href="listing.html?category=personalized"],
body.gg-category-personalized
.navbar
a[href="listing.html?category=personalized"],
body.gg-category-combos .navbar a[href="listing.html?category=combos"],
body.gg-category-gifts .navbar a[href="listing.html?category=gifts"],
body.gg-category-offers .navbar a[href="listing.html?category=offers"] {
background: linear-gradient(
135deg,
var(--gg-hover-pink),
var(--gg-hover-purple)
) !important;
color: #fff !important;
border-color: transparent !important;
}
body.gg-category-flowers .navbar a[href="listing.html"],
body.gg-category-flowers .navbar a.nav-pill[href="listing.html"] {
background: #fff !important;
color: #5a1a93 !important;
border-color: #ead8e7 !important;
box-shadow: none !important;
}