@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=Fredoka:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=Mochiy+Pop+One&family=Playfair+Display:wght@500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --brand: #6d5dfc;
    --ink: #19202d;
    --muted: #778096;
    --surface: #f7f8fc;
}


body {
    background: var(--surface);
    color: var(--ink);
}

.admin-theme {
    --surface: #f7f8fc;
    --ink: #19202d;
}

.store-theme {
    --store-bg: #fbfaf7;
    --store-ink: #24231f;
    --store-accent: #a15c38;
    background: var(--store-bg);
    color: var(--store-ink);
}

.store-font-system {
    --store-font: Arial, Helvetica, sans-serif;
}

.store-font-modern {
    --store-font: "Trebuchet MS", Arial, sans-serif;
}

.store-font-serif {
    --store-font: Georgia, "Times New Roman", serif;
}

.store-font-rounded {
    --store-font: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
}

.store-font-mono {
    --store-font: "Courier New", monospace;
}

.store-font-manrope {
    --store-font: "Manrope", Arial, sans-serif;
}

.store-font-dm-sans {
    --store-font: "DM Sans", Arial, sans-serif;
}

.store-font-space-grotesk {
    --store-font: "Space Grotesk", Arial, sans-serif;
}

.store-font-playfair {
    --store-font: "Playfair Display", Georgia, serif;
}

.store-font-baloo {
    --store-font: "Baloo 2", Arial, sans-serif;
}

.store-font-fredoka {
    --store-font: "Fredoka", Arial, sans-serif;
}

.store-font-mochiy {
    --store-font: "Mochiy Pop One", Arial, sans-serif;
}

.storefront-page, .preview-page {
    font-family: var(--store-font, Arial, sans-serif);
}

.store-theme-midnight {
    --store-bg: #10151f;
    --store-ink: #f4f0e8;
    --store-accent: #8fd3c7;
}

.store-theme-editorial {
    --store-bg: #f4f0ea;
    --store-ink: #332b27;
    --store-accent: #8c4a35;
}

.store-theme-sunset {
    --store-bg: #fff7f0;
    --store-ink: #3b2025;
    --store-accent: #e15b3d;
}

.store-theme-minimal {
    --store-bg: #ffffff;
    --store-ink: #171717;
    --store-accent: #171717;
}

.store-theme-botanical {
    --store-bg: #f5f1e8;
    --store-ink: #30463a;
    --store-accent: #718477;
}

.store-theme-studio {
    --store-bg: #f7f7f3;
    --store-ink: #20232a;
    --store-accent: #3155d9;
}

.store-theme-noir {
    --store-bg: #151515;
    --store-ink: #e8e1d5;
    --store-accent: #c7a978;
}

.store-theme-playful {
    --store-bg: #fffaf2;
    --store-ink: #25213a;
    --store-accent: #ff6b5e;
}

.store-theme-coastal {
    --store-bg: #f4ebdd;
    --store-ink: #183642;
    --store-accent: #b8d8d2;
}

.store-theme-mono-grid {
    --store-bg: #ffffff;
    --store-ink: #111111;
    --store-accent: #111111;
}

.store-theme-lagoon {
    --store-bg: #f1fbfb;
    --store-ink: #123b43;
    --store-accent: #43BFC7;
}

.store-theme-christmas {
    --store-bg: #fbf7ed;
    --store-ink: #183a2b;
    --store-accent: #a8323e;
}

.app-header {
    height: 72px;
    padding: 0 28px;
    border-bottom: 1px solid #e8eaf1;
    background: white;
}

.page-title {
    font-size: 21px;
    margin: 0;
    font-weight: 650;
}

.header-user-name {
    color: #4c5364;
    font-size: 14px;
}

.header-avatar {
    --vaadin-avatar-size: 34px;
}

.app-drawer {
    padding: 26px 16px 18px;
    background: #171b2b;
    color: #d7daea;
}

.drawer-branding {
    padding: 0 14px 30px;
}

.brand-name {
    margin: 0;
    color: white;
    font-size: 21px;
    letter-spacing: -.5px;
}

.brand-line, .storefront-brand-line {
    align-items: center;
    gap: 9px;
}

.brand-line img, .storefront-brand-line img {
    height: 32px;
    max-width: 42px;
    object-fit: contain;
}

.drawer-branding img {
    max-width: 150px;
    max-height: 42px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 10px;
}

.brand-subtitle {
    color: #858ba7;
    font-size: 12px;
}

.drawer-navigation {
    gap: 5px;
}

.nav-item, .drawer-settings {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border-radius: 8px;
    color: #aeb4cb;
    text-decoration: none;
    font-size: 14px;
}

.nav-item:hover, .nav-item[highlight], .drawer-settings:hover {
    color: white;
    background: #272d45;
}

.nav-item vaadin-icon, .drawer-settings vaadin-icon {
    width: 18px;
    height: 18px;
}

.drawer-settings {
    border-top: 1px solid #2a3047;
    border-radius: 0;
    padding-top: 20px;
}

.dashboard-content {
    max-width: 1400px;
    padding: 42px 48px;
    margin: 0 auto;
}

.dashboard-content h2 {
    margin: 0 0 6px;
    font-size: 25px;
}

.dashboard-intro {
    color: var(--muted);
    margin-top: 0;
}

.metric-grid {
    margin: 30px 0;
    gap: 18px;
    flex-wrap: wrap;
}

.featured-products-checkboxes::part(group) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
}

.metric-card {
    background: white;
    border: 1px solid #eaebf2;
    border-radius: 12px;
    padding: 22px;
    min-width: 205px;
    flex: 1;
    box-shadow: 0 3px 10px rgba(25, 32, 45, .03);
}

.metric-card vaadin-horizontal-layout {
    align-items: center;
    gap: 9px;
}

.metric-icon {
    color: var(--brand);
    width: 19px;
}

.metric-label {
    color: var(--muted);
    font-size: 13px;
}

.metric-value {
    display: block;
    font-size: 28px;
    font-weight: 700;
    margin: 14px 0 5px;
}

.metric-trend {
    color: #1a9b69;
    font-size: 12px;
}

.dashboard-panel {
    background: white;
    border: 1px solid #eaebf2;
    border-radius: 12px;
    padding: 26px;
    min-height: 180px;
}

.dashboard-panel h2 {
    font-size: 18px;
}

.dashboard-panel p {
    color: var(--muted);
}

.dashboard-activity-list {
    padding: 0;
    gap: 0;
}

.dashboard-activity-row {
    width: 100%;
    align-items: center;
    border-top: 1px solid #eaebf2;
    padding: 12px 0;
    gap: 14px;
}

.dashboard-activity-row span:first-child {
    font-weight: 600;
}

.dashboard-activity-row span:nth-child(2) {
    color: var(--muted);
    flex: 1;
}

.dashboard-activity-row span:last-child {
    color: var(--muted);
    font-size: 12px;
    white-space: nowrap;
}

.contacts-content {
    max-width: 1400px;
    width: 100%;
    padding: 42px 48px;
    margin: 0 auto;
    box-sizing: border-box;
}

.contacts-content h2 {
    margin: 0 0 6px;
    font-size: 25px;
}

.order-actions {
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}

.order-actions vaadin-combo-box {
    flex: 1 1 150px;
    min-width: 145px;
}

.contacts-toolbar {
    margin: 28px 0 18px;
}

.contacts-toolbar vaadin-text-field {
    min-width: 240px;
}

.storefront-page {
    background: var(--store-bg);
    color: var(--store-ink);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.storefront-page > section.storefront-section {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 900px;
    padding: 72px 42px;
    width: 100%;
}

.storefront-page > h1 {
    font-size: clamp(34px, 6vw, 58px);
    letter-spacing: -2px;
    margin: 70px auto 12px;
    max-width: 900px;
    width: calc(100% - 84px);
}

.storefront-page > h2 {
    color: var(--store-accent);
    font-size: 26px;
    margin: 22px auto;
    max-width: 900px;
    width: calc(100% - 84px);
}

.storefront-page > p {
    color: color-mix(in srgb, var(--store-ink) 68%, transparent);
    max-width: 900px;
    width: calc(100% - 84px);
}

.storefront-page > img {
    border-radius: 14px;
    display: block;
    margin: 30px auto;
    max-height: 560px;
    object-fit: cover;
    width: min(100% - 84px, 640px) !important;
}

.storefront-page > vaadin-button {
    align-self: center;
    margin: 12px 0 70px;
}

.storefront-page > vaadin-button::part(button) {
    background: var(--store-accent);
    border-radius: 999px;
    color: white;
    font-weight: 600;
    min-height: 46px;
    padding: 0 23px;
}

.storefront-product-card vaadin-button::part(button), .storefront-page vaadin-button.storefront-add-to-cart::part(button) {
    background: var(--store-accent, #a15c38) !important;
    border: 0 !important;
    border-radius: 999px;
    color: #fff !important;
    font-family: var(--store-font, Arial, sans-serif);
    font-weight: 600;
    margin: 8px 20px 0;
    min-height: 42px;
    padding: 0 20px;
}

.storefront-product-card vaadin-button:hover::part(button), .storefront-page vaadin-button.storefront-add-to-cart:hover::part(button) {
    background: var(--store-ink, #24231f) !important;
    color: var(--store-bg, #fbfaf7) !important;
}

.storefront-add-to-cart[theme~="primary"]::part(button) {
    background-color: var(--store-accent, #a15c38) !important;
    color: #fff !important;
}
.storefront-add-to-cart { margin-left: 5px; }

.storefront-product-card vaadin-button:active::part(button) {
    transform: translateY(1px);
}

.storefront-page .storefront-section h1 {
    font-size: clamp(34px, 6vw, 58px);
    letter-spacing: -2px;
}

.storefront-page .storefront-section h2 {
    border-top: 2px solid var(--store-ink);
    color: var(--store-accent);
    margin-top: 28px;
    padding-top: 16px;
    text-align: right;
}

.storefront-page .storefront-section vaadin-horizontal-layout {
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--store-ink) 14%, transparent);
    justify-content: space-between;
    padding: 16px 0;
    width: 100%;
}

.storefront-page .storefront-section vaadin-integer-field {
    max-width: 150px;
}

.storefront-main {
    box-sizing: border-box;
    flex: 0 0 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    width: 100%;
}

.store-theme-midnight .storefront-header, .store-theme-midnight .storefront-footer {
    background: #10151f;
}

.store-theme-midnight .storefront-hero {
    background: linear-gradient(110deg, #1c2a3a, #263746 53%, #14202e);
}

.store-theme-midnight .storefront-about {
    background: #080c12;
}

.store-theme-editorial .storefront-hero {
    background: linear-gradient(110deg, #e8d6c7, #f2e7dc 53%, #d8b9a4);
}

.store-theme-sunset .storefront-hero {
    background: linear-gradient(110deg, #ffd6b8, #ffe8c9 53%, #f7b7a3);
}

.store-theme-minimal .storefront-hero {
    background: #f3f3f3;
}

.store-theme-minimal .storefront-product-card {
    border-color: #dedede;
}

.store-theme-minimal .storefront-about {
    background: #171717;
}

.store-theme-botanical .storefront-hero {
    background: linear-gradient(110deg, #dce5d8, #eef0e4 53%, #b9cbb9);
}

.store-theme-botanical .storefront-product-visual {
    background: #d6e0d2;
}

.store-theme-botanical .storefront-about {
    background: #30463a;
}

.store-theme-studio .storefront-hero {
    background: linear-gradient(110deg, #dce4ff, #f1f3ff 53%, #b9c8ff);
}

.store-theme-studio .storefront-product-card {
    border-color: #d9def0;
}

.store-theme-studio .storefront-about {
    background: #20232a;
}

.store-theme-noir .storefront-header, .store-theme-noir .storefront-footer {
    background: #151515;
}

.store-theme-noir .storefront-hero {
    background: linear-gradient(110deg, #292929, #1c1c1c 53%, #3b3328);
}

.store-theme-noir .storefront-product-card {
    background: #222;
    border-color: #4b4337;
}

.store-theme-noir .storefront-product-visual {
    background: #383838;
}

.store-theme-noir .storefront-about {
    background: #0c0c0c;
}

.store-theme-playful .storefront-header, .store-theme-playful .storefront-footer {
    background: #ffe58a;
}

.store-theme-playful .storefront-hero {
    background: linear-gradient(110deg, #ff6b5e, #ffe58a 53%, #b9a7ff);
}

.store-theme-playful .storefront-product-card {
    border-color: #b9a7ff;
    border-radius: 20px;
}

.store-theme-playful .storefront-about {
    background: #25213a;
}

.store-theme-coastal .storefront-hero {
    background: linear-gradient(110deg, #b8d8d2, #f4ebdd 53%, #d5e9e4);
}

.store-theme-coastal .storefront-header, .store-theme-coastal .storefront-footer {
    background: #b8d8d2;
}

.store-theme-coastal .storefront-about {
    background: #183642;
}

.store-theme-mono-grid .storefront-header, .store-theme-mono-grid .storefront-footer {
    background: #ffffff;
}

.store-theme-mono-grid .storefront-hero {
    background: #e5e5e5;
}

.store-theme-mono-grid .storefront-product-card {
    border-color: #e5e5e5;
    border-radius: 0;
}

.store-theme-mono-grid .storefront-about {
    background: #111111;
}

.store-theme-lagoon .storefront-header, .store-theme-lagoon .storefront-footer {
    background: #d9f3f3;
}

.store-theme-lagoon .storefront-hero {
    background: linear-gradient(110deg, #43BFC7, #b9e9e8 53%, #ffd0c5);
}

.store-theme-lagoon .storefront-product-card {
    border-color: #a7dfe0;
}

.store-theme-lagoon .storefront-product-visual {
    background: #d9f3f3;
}

.store-theme-lagoon .storefront-about {
    background: #123b43;
}

.store-theme-christmas .storefront-header,
.store-theme-christmas .storefront-footer {
    background: #173d2d;
}

.store-theme-christmas .storefront-header,
.store-theme-christmas .storefront-footer,
.store-theme-christmas .storefront-about {
    color: #fff8e9;
}

.store-theme-christmas .storefront-hero {
    background:
        radial-gradient(circle at 88% 20%, rgb(255 226 157 / 32%) 0 3px, transparent 4px),
        radial-gradient(circle at 12% 78%, rgb(255 248 233 / 35%) 0 2px, transparent 3px),
        linear-gradient(110deg, #174331, #286344 53%, #87313a);
    color: #fff8e9;
}

.store-theme-christmas .storefront-hero .storefront-eyebrow {
    color: #f4d48b;
}

.store-theme-christmas .storefront-product-card {
    border-color: #e8d8b7;
}

.store-theme-christmas .storefront-product-visual {
    background: #f1e7d2;
}

.store-theme-christmas .storefront-about {
    background: #173d2d;
}

.store-theme.store-theme-christmas .storefront-footer {
    background: #173d2d;
}

.store-theme .storefront-brand, .store-theme .storefront-nav-link, .store-theme .storefront-admin-link {
    color: var(--store-ink);
}

.store-theme .storefront-nav-link:hover, .store-theme .storefront-admin-link:hover, .store-theme .storefront-eyebrow {
    color: var(--store-accent);
}

.store-theme-christmas .storefront-brand,
.store-theme-christmas .storefront-nav-link,
.store-theme-christmas .storefront-admin-link,
.store-theme-christmas .storefront-nav-link:hover,
.store-theme-christmas .storefront-admin-link:hover {
    color: #ffd54f;
}

.storefront-header {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    margin: 0;
    max-width: none;
    padding: 10px 42px;
    position: relative;
    width: 100%;
    z-index: 10;
}

.cart-header {
    background: var(--store-bg);
    justify-content: space-between;
}

.cart-header .storefront-admin-link {
    border-color: color-mix(in srgb, var(--store-ink) 24%, transparent);
}

.cart-header .storefront-admin-link:hover {
    border-color: var(--store-accent);
}

.storefront-shop-header {
    justify-content: space-between;
}

.storefront-shop-header .storefront-brand {
    margin: 0;
}

.storefront-shop-header .storefront-nav {
    width: auto;
}

.storefront-brand {
    color: #24231f;
    font-size: 25px;
    letter-spacing: -.8px;
    margin: 0;
}

.storefront-brand-line {
    margin-right: auto;
}

.storefront-nav {
    align-items: center;
    gap: 28px;
    justify-content: flex-end;
    width: 100%;
}

.storefront-nav-link, .storefront-admin-link {
    color: #5f5b52;
    font-size: 14px;
    text-decoration: none;
}

.storefront-nav-link:hover, .storefront-admin-link:hover {
    color: #a15c38;
}

.storefront-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
}

.storefront-cart-link:hover { color: var(--brand); }

.storefront-cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font-size: 0.72rem;
    line-height: 1;
}

.storefront-customer-status {
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.storefront-admin-link {
    border: 1px solid #d9d0c5;
    border-radius: 999px;
    padding: 9px 16px;
}

.storefront-hero {
    background: linear-gradient(110deg, #e9dfd2 0%, #f3e9dd 53%, #d8c5b1 100%);
    box-sizing: border-box;
    display: flex;
    min-height: 475px;
    padding: 90px max(42px, calc((100% - 1156px) / 2));
    position: relative;
    overflow: hidden;
}

.storefront-hero::after {
    background: rgba(255, 255, 255, .18);
    border-radius: 50%;
    content: '';
    height: 480px;
    position: absolute;
    right: 8%;
    top: -170px;
    width: 480px;
}

.storefront-hero-content {
    max-width: 540px;
    position: relative;
    z-index: 1;
}

.storefront-eyebrow {
    color: #a15c38;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.storefront-hero h1 {
    font-size: clamp(42px, 6vw, 72px);
    letter-spacing: -3px;
    line-height: .98;
    margin: 22px 0;
    max-width: 620px;
}

.storefront-hero p {
    color: #62594e;
    font-size: 18px;
    line-height: 1.6;
    max-width: 450px;
}

.storefront-button {
    background: #24231f;
    border-radius: 999px;
    color: white;
    display: inline-block;
    font-size: 14px;
    margin-top: 20px;
    padding: 15px 22px;
    text-decoration: none;
}

.storefront-section, .storefront-about {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1240px;
    padding: 78px 42px;
    width: 100%;
}

.storefront-section h1 {
    text-align: left;
}

.customer-auth-form {
    align-items: stretch;
    gap: 18px;
    max-width: 520px;
    padding: 0;
    width: 100%;
}

.customer-auth-section {
    color: var(--store-ink);
}

.customer-auth-title {
    color: var(--store-ink);
    font-size: clamp(38px, 6vw, 58px);
    letter-spacing: -2px;
    margin: 0 0 28px;
}

.customer-auth-form vaadin-text-field,
.customer-auth-form vaadin-email-field,
.customer-auth-form vaadin-password-field {
    --lumo-body-text-color: var(--store-ink);
    --lumo-secondary-text-color: color-mix(in srgb, var(--store-ink) 72%, transparent);
    --lumo-contrast-10pct: color-mix(in srgb, var(--store-ink) 12%, transparent);
    --lumo-primary-color: var(--store-accent);
    --lumo-primary-text-color: var(--store-accent);
    width: 100%;
}

.customer-auth-form vaadin-text-field::part(label),
.customer-auth-form vaadin-email-field::part(label),
.customer-auth-form vaadin-password-field::part(label) {
    color: var(--store-ink);
    font-weight: 600;
}

.customer-auth-form vaadin-text-field::part(input-field),
.customer-auth-form vaadin-email-field::part(input-field),
.customer-auth-form vaadin-password-field::part(input-field) {
    background: color-mix(in srgb, var(--store-bg) 82%, var(--store-ink)) !important;
    border: 1px solid color-mix(in srgb, var(--store-ink) 24%, transparent) !important;
    border-radius: 10px;
    color: var(--store-ink) !important;
}

.customer-auth-form vaadin-button.customer-auth-submit::part(button) {
    background: var(--store-accent) !important;
    border: 0 !important;
    border-radius: 999px;
    color: var(--store-bg) !important;
    font-weight: 600;
    min-height: 46px;
    padding: 0 23px;
}

.customer-auth-form vaadin-button.customer-auth-submit:hover::part(button) {
    background: var(--store-ink) !important;
    color: var(--store-bg) !important;
}

.customer-auth-form a.customer-auth-link {
    color: var(--store-accent) !important;
    font-weight: 600;
    text-decoration: none;
}

.customer-auth-form a.customer-auth-link:hover {
    color: var(--store-ink) !important;
    text-decoration: underline;
}

.storefront-page-title {
    align-self: flex-start;
    color: var(--store-ink);
    font-size: clamp(38px, 5vw, 56px);
    font-weight: 700;
    letter-spacing: -2px;
    line-height: 1;
    margin: 0 0 10px;
    text-align: left !important;
    width: 100%;
}

.storefront-shop-toolbar {
    align-items: end;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-top: 30px;
    width: 100%;
}

.storefront-shop-toolbar vaadin-text-field, .storefront-shop-toolbar vaadin-combo-box {
    min-width: 0;
}

.storefront-shop-toolbar vaadin-text-field {
    min-width: 0;
    width: 100%;
}

.storefront-shop-toolbar vaadin-combo-box {
    min-width: 0;
    width: 100%;
}

.storefront-shop-toolbar vaadin-button {
    width: auto;
}

.storefront-search-button {
    align-self: flex-end;
}

.storefront-search-button::part(button) {
    background: var(--store-ink);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    color: var(--store-bg);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    min-height: 44px;
    padding: 0 22px;
}

.storefront-search-button[theme~="primary"]::part(button) {
    background: var(--store-ink);
    color: var(--store-bg);
}

.storefront-search-button:hover::part(button) {
    background: var(--store-accent);
    color: white;
}

.storefront-product-link {
    color: inherit;
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin: 14px 14px 0;
    text-decoration: none;
}

.storefront-product-link:hover {
    color: var(--store-accent);
}

.storefront-product-title-link {
    color: inherit;
    text-decoration: none;
}

.storefront-product-title-link:hover {
    color: var(--store-accent);
}

.storefront-section h2, .storefront-about h2 {
    font-size: 30px;
    letter-spacing: -1px;
    margin: 0 0 8px;
}

.storefront-section > p, .storefront-about p {
    color: #777066;
    margin-top: 0;
}

.storefront-product-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 200px));
    margin-top: 34px;
}

.storefront-product-card {
    aspect-ratio: 1 / 1;
    background: white;
    border: 1px solid #eee8e0;
    box-sizing: border-box;
    height: 200px;
    min-height: 200px;
    max-height: 200px;
    overflow: hidden;
    padding-bottom: 20px;
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

.storefront-product-card h2, .storefront-product-card p {
    margin-left: 14px;
    margin-right: 14px;
}

.storefront-product-card h2 {
    font-size: 16px;
    margin-top: 14px;
}

.storefront-product-card p {
    color: #827b72;
    font-size: 13px;
    line-height: 1.3;
    margin-bottom: 0;
    margin-top: 6px;
}

.storefront-product-card .storefront-product-card-description {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
}

.storefront-product-visual {
    background: #e8ddd0;
    height: 140px;
    overflow: hidden;
}

.storefront-product-visual img {
    display: block;
    height: 100% !important;
    object-fit: cover;
    width: 100% !important;
}

.storefront-product-card:nth-child(2) .storefront-product-visual {
    background: #d8e0dc;
}

.storefront-product-card:nth-child(3) .storefront-product-visual {
    background: #e2d8e0;
}

/* Live catalogue cards need room for image, details, price, and Add to cart. */
.storefront-page .storefront-product-card {
    display: flex;
    flex-direction: column;
    height: 320px;
    max-height: 320px;
    max-width: 230px;
    min-width: 230px;
    width: 230px;
}

.storefront-page .storefront-product-grid {
    grid-template-columns: repeat(auto-fit, minmax(230px, 230px));
}

.storefront-page .storefront-product-card .storefront-add-to-cart {
    border-radius: 9px;
    margin: 8px 12px 12px;
    margin-top: auto;
}

.storefront-about {
    background: #24231f;
    color: white;
    max-width: none;
    padding-left: max(42px, calc((100% - 1156px) / 2));
    padding-right: max(42px, calc((100% - 1156px) / 2));
}

.storefront-about h2 {
    max-width: 570px;
}

.storefront-about p {
    color: #c4bdb3;
    max-width: 520px;
    line-height: 1.7;
}

.storefront-about-page {
    background: var(--store-bg);
    box-sizing: border-box;
    color: var(--store-ink);
    min-height: 560px;
    padding: 72px max(42px, calc((100% - 820px) / 2));
    width: 100%;
}

.storefront-about-page h1 {
    margin: 0 0 42px;
}

.storefront-about-page h2 {
    margin: 36px 0 20px;
}

.storefront-about-detail {
    border-bottom: 1px solid color-mix(in srgb, var(--store-ink) 14%, transparent);
    max-width: 720px;
    padding: 16px 0;
}

.storefront-about-detail span {
    color: var(--store-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.storefront-about-detail p {
    color: var(--store-ink);
    margin: 6px 0 0;
    max-width: none;
}

.storefront-footer {
    align-items: center;
    background: var(--store-bg);
    box-sizing: border-box;
    color: #827b72;
    display: flex;
    flex: 0 0 auto;
    font-size: 12px;
    gap: 16px;
    justify-content: flex-start;
    margin: auto 0 0;
    max-width: none;
    padding: 10px 42px;
    position: relative;
    width: 100%;
    z-index: 10;
}

.storefront-footer a {
    color: inherit;
    text-decoration: none;
}

.storefront-layout-component {
    box-sizing: border-box;
    margin: 0;
    overflow: visible;
    padding: 28px;
    position: absolute;
}

.layout-canvas {
    background: #f0f1f6;
    border: 1px solid #dfe2eb;
    box-sizing: border-box;
    height: 720px;
    overflow: auto;
    position: relative;
    min-width: 1260px;
    width: 100%;
}

.layout-card.layout-featured-collection {
    min-height: 126px;
}

.layout-card.layout-adsense {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 0;
    padding: 26px 8px 8px;
}

.layout-adsense-title {
    font-size: 14px;
    font-weight: 700;
}

.layout-adsense-size {
    color: #596073;
    font-size: 12px;
}

.layout-toolbar {
    align-items: end;
    margin: 0 0 8px;
}

.layout-toolbar vaadin-combo-box {
    font-size: 13px;
}

.layout-toolbar vaadin-button {
    font-size: 13px;
    min-height: 34px;
    padding: 0 14px;
}

.layout-card {
    background: rgba(255, 255, 255, .35);
    border: 2px dashed #7c6cff;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(124, 108, 255, .12);
    cursor: grab;
    min-height: 90px;
    padding: 16px;
    position: absolute;
    user-select: none;
}

.layout-card:has(.layout-resize) {
    min-height: 20px;
}

.layout-resize {
    bottom: -4px;
    cursor: nwse-resize;
    height: 14px;
    position: absolute;
    right: -4px;
    width: 14px;
}

.layout-resize::after {
    border-bottom: 3px solid var(--brand, #6d5dfc);
    border-right: 3px solid var(--brand, #6d5dfc);
    bottom: 2px;
    content: '';
    height: 8px;
    position: absolute;
    right: 2px;
    width: 8px;
}

.layout-card:hover .layout-resize, .layout-card:focus-within .layout-resize {
    opacity: 1;
}

.layout-remove {
    align-items: center;
    display: flex;
    font-size: 11px;
    height: 26px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 3px;
    top: 3px;
    width: 26px;
    z-index: 1;
}

.layout-remove vaadin-icon {
    height: 14px;
    width: 14px;
}

.layout-card {
    padding: 0;
}

.layout-card h1, .layout-card h2, .layout-card h3, .layout-card h4, .layout-card h5, .layout-card h6, .layout-card p {
    margin: 0;
}

.layout-h1 {
    font-size: 2em;
    font-weight: 700;
}

.layout-h2 {
    font-size: 1.5em;
    font-weight: 700;
}

.layout-h3 {
    font-size: 1.17em;
    font-weight: 700;
}

.layout-h4 {
    font-size: 1em;
    font-weight: 700;
}

.layout-h5 {
    font-size: .83em;
    font-weight: 700;
}

.layout-h6 {
    font-size: .67em;
    font-weight: 700;
}

.layout-button {
    background: var(--brand);
    border-radius: 999px;
    color: white;
    display: inline-block;
    padding: 10px 18px;
}

.layout-remove {
    opacity: 0;
    pointer-events: none;
}

.layout-card:hover .layout-remove, .layout-card:focus-within .layout-remove {
    opacity: 1;
    pointer-events: auto;
}

.layout-workspace {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    gap: 20px;
    width: 100%;
}

.layout-workspace > .layout-editor-pane, .layout-workspace > .layout-preview {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    width: calc(50% - 10px);
}

.layout-editor-pane {
    height: 720px;
    overflow: auto;
}

.settings-content > h2 {
    margin: 12px 0 4px;
}

.settings-content > p {
    margin: 0 0 10px;
}

.layout-toolbar-wrap {
    box-sizing: border-box;
    margin: 0 0 8px;
    width: 100%;
}

.layout-workspace {
    margin: 0;
    padding: 0;
}

.layout-workspace > * {
    min-width: 0;
}

.layout-preview {
    background: #dfe2eb;
    border-radius: 8px;
    box-sizing: border-box;
    height: 720px;
    overflow: auto;
    padding: 12px;
}

.preview-page {
    background: var(--store-bg, #fbfaf7);
    color: var(--store-ink, #24231f);
    min-height: 900px;
    min-width: 1260px;
    overflow: visible;
    position: relative;
}

.homepage-full-preview-dialog::part(content) {
    padding: 0;
    overflow: hidden;
}

.homepage-full-preview-frame {
    background: #dfe2eb;
    box-sizing: border-box;
    height: 100%;
    overflow: auto;
    padding: 18px;
    width: 100%;
}

.homepage-full-preview-frame > .preview-page {
    margin: 0 auto;
}

.preview-storefront-header {
    align-items: center;
    background: var(--store-accent, #f0d27a);
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    height: 89px;
    min-width: 1260px;
    padding: 18px 34px;
}

.preview-storefront-logo {
    height: 34px;
    object-fit: contain;
    width: 34px;
}

.preview-storefront-company {
    color: var(--store-ink, #24231f);
    font-size: 26px;
    font-weight: 700;
}

.preview-brand {
    font-size: 20px;
    margin: 16px 22px;
    position: relative;
    z-index: 2;
}

.preview-stage {
    min-height: 900px;
    position: relative;
}

.preview-component {
    box-sizing: border-box;
    padding: 18px;
    position: absolute;
}

.preview-adsense {
    align-items: center;
    background: repeating-linear-gradient(135deg, #f4f5f8, #f4f5f8 10px, #eceef4 10px, #eceef4 20px);
    border: 1px dashed #7c6cff;
    display: flex;
    font-size: 13px;
    justify-content: center;
    padding: 8px;
    text-align: center;
}

.preview-component h2, .preview-component h3, .preview-component p {
    margin: 0;
}

.preview-featured-collection {
    overflow: visible;
}

.preview-featured-collection > div {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.preview-featured-collection .storefront-product-grid {
    align-content: start;
    flex: 1 1 auto;
    grid-auto-rows: 200px;
    grid-template-rows: none;
    min-height: 0;
    overflow: hidden;
}

.preview-featured-collection .storefront-product-card {
    display: flex;
    flex-direction: column;
    height: 320px;
    max-height: 320px;
    max-width: 230px;
    min-width: 230px;
    width: 230px;
}

.preview-featured-collection .storefront-product-visual {
    flex: 0 0 120px;
    height: 120px;
}

.preview-featured-collection .storefront-product-grid {
    grid-template-columns: repeat(auto-fit, 230px);
}

.preview-featured-collection .storefront-add-to-cart {
    border-radius: 9px;
    margin: 8px 12px 12px;
    margin-top: auto;
}

.preview-picture, .layout-picture {
    overflow: hidden;
}

.preview-picture img, .layout-picture img, .storefront-component-picture img {
    display: block;
    height: 100%;
    object-fit: contain;
    object-position: center;
    width: 100%;
}

.layout-picture img {
    -webkit-user-drag: none;
    user-drag: none;
}

.layout-picture vaadin-upload {
    font-size: 12px;
}

.preview-button a {
    background: var(--brand);
    border-radius: 999px;
    color: white;
    display: inline-block;
    padding: 10px 18px;
    text-decoration: none;
}

.layout-editable {
    border-radius: 4px;
    min-height: 20px;
    outline: 0;
    padding: 3px;
    user-select: text;
}

.layout-editable:focus {
    background: #f1f4ff;
    box-shadow: 0 0 0 2px var(--brand);
}

.layout-card.layout-dragging,
.layout-card.layout-dragging .layout-editable {
    user-select: none;
    cursor: grabbing;
}

.layout-box, .storefront-component-box {
    background: #fff;
    border: 1px solid #e3e0da;
    border-radius: 10px;
}

.layout-picture {
    background: #e7edf4;
}

.layout-spacer {
    background: repeating-linear-gradient(45deg, #f4f5f8, #f4f5f8 8px, #e9ebf1 8px, #e9ebf1 10px);
}

/* Editor/test component surfaces should not tint the canvas. */
.layout-card,
.layout-box,
.layout-picture,
.layout-spacer {
    background-color: transparent;
    background-image: none;
}

.storefront-component-button a {
    background: var(--brand);
    border-radius: 999px;
    color: white;
    display: inline-block;
    padding: 12px 20px;
    text-decoration: none;
}

.storefront-component-box {
    background: transparent;
    border: 0;
}

.storefront-component-frame, .storefront-component-box {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.storefront-component-adsense {
    overflow: visible !important;
    padding: 0 !important;
}

.storefront-adsense-frame {
    display: block;
    max-width: none;
    overflow: visible;
}

@media (max-width: 700px) {
    .dashboard-content {
        padding: 28px 20px;
    }

    .header-user-name {
        display: none;
    }
}

@media (max-width: 700px) {
    .storefront-header, .storefront-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .storefront-header {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .storefront-nav {
        flex-wrap: wrap;
        gap: 10px 16px;
        justify-content: flex-start;
    }

    .storefront-header > .storefront-nav {
        flex: 1 1 100%;
        width: 100%;
    }

    .storefront-nav > .storefront-brand-line {
        flex: 1 0 100%;
        margin-right: 0;
        width: 100%;
    }

    .storefront-nav-link {
        display: inline;
    }

    .storefront-hero {
        min-height: 430px;
        padding: 70px 20px;
    }

    .storefront-hero h1 {
        letter-spacing: -2px;
    }

    .storefront-section {
        padding: 55px 20px;
    }

    .storefront-shop-toolbar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .storefront-shop-toolbar vaadin-text-field, .storefront-shop-toolbar vaadin-combo-box, .storefront-shop-toolbar vaadin-button {
        width: 100%;
    }

    .storefront-product-grid {
        grid-template-columns: 1fr;
    }

    .storefront-product-visual {
        height: 160px;
    }

    .storefront-about {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Locked live catalogue geometry. Keep preview cards independent. */
.storefront-page .storefront-product-grid {
    grid-template-columns: repeat(auto-fit, 230px) !important;
}

.storefront-page .storefront-product-card {
    height: 320px !important;
    max-height: 320px !important;
    max-width: 230px !important;
    min-width: 230px !important;
    padding-bottom: 0;
    width: 230px !important;
}

.storefront-page .storefront-product-visual {
    flex: 0 0 140px;
    height: 140px !important;
}

.storefront-product-detail {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    gap: clamp(36px, 7vw, 96px);
    grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr);
    margin: 0 auto;
    max-width: 1220px;
    min-height: 620px;
    padding: 64px 42px 80px;
    width: 100%;
}

.storefront-product-detail-visual {
    align-items: center;
    background: color-mix(in srgb, var(--store-ink) 5%, var(--store-bg));
    border-radius: 18px;
    display: flex;
    justify-content: center;
    min-height: 420px;
    overflow: hidden;
}

.storefront-product-detail-visual img {
    display: block;
    height: auto;
    max-height: 620px;
    object-fit: contain;
    width: 100%;
}

.storefront-product-detail-info {
    color: var(--store-ink);
    gap: 0;
    max-width: 500px;
}

.storefront-product-detail-category {
    color: var(--store-accent);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .09em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.storefront-product-detail-title {
    color: var(--store-ink);
    font-size: clamp(36px, 4.5vw, 58px);
    letter-spacing: -.04em;
    line-height: 1.06;
    margin: 0 0 20px;
    text-align: left;
}

.storefront-product-detail-description {
    color: color-mix(in srgb, var(--store-ink) 76%, transparent);
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 24px;
    max-width: 48ch;
    white-space: pre-line;
}

.storefront-product-detail-price {
    color: var(--store-accent);
    font-size: 28px;
    margin: 0 0 26px;
}

.storefront-product-purchase-controls {
    align-items: end;
    flex-wrap: wrap;
    gap: 12px;
}

.storefront-product-quantity {
    max-width: 150px;
}

.storefront-product-quantity::part(label) {
    color: var(--store-ink);
    font-family: inherit;
    font-weight: 600;
}

.storefront-product-add-to-cart::part(button) {
    background: var(--store-ink);
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    color: var(--store-bg);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    min-height: 48px;
    padding: 0 26px;
}

.storefront-product-add-to-cart:hover::part(button) {
    background: var(--store-accent);
    color: white;
}

/* Published homepage sections use absolute coordinates on desktop. On a
   narrow viewport those coordinates and saved heights cannot contain growing
   text, so let the sections form a normal vertical flow instead. */
@media (max-width: 700px) {
    .storefront-product-detail {
        gap: 30px;
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 30px 20px 48px;
    }

    .storefront-product-detail-visual {
        min-height: 280px;
    }

    .storefront-product-detail-visual img {
        max-height: 480px;
    }

    .storefront-product-detail-info {
        max-width: none;
    }

    .storefront-product-purchase-controls {
        align-items: stretch;
        width: 100%;
    }

    .storefront-product-quantity {
        max-width: none;
        width: 100%;
    }

    .storefront-product-add-to-cart {
        width: 100%;
    }

    .storefront-main {
        height: auto !important;
        overflow: visible;
    }

    .storefront-layout-component {
        box-sizing: border-box;
        height: auto !important;
        left: auto !important;
        padding: 28px 20px;
        position: static !important;
        top: auto !important;
        width: 100% !important;
    }

    .storefront-layout-component h1,
    .storefront-layout-component h2,
    .storefront-layout-component h3,
    .storefront-layout-component h4,
    .storefront-layout-component h5,
    .storefront-layout-component h6,
    .storefront-layout-component p {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .storefront-layout-component > img {
        display: block;
        height: auto !important;
        max-height: none;
        max-width: 100%;
        width: auto !important;
    }

    .storefront-page .storefront-product-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .storefront-page .storefront-product-card {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .storefront-page .storefront-product-visual {
        width: 100%;
    }
}

.payfast-status-pending-dialog::part(content) {
    max-width: calc(100vw - 32px);
    width: 400px;
}

.payfast-pending-spinner {
    animation: payfast-pending-spin 800ms linear infinite;
    border: 4px solid color-mix(in srgb, var(--store-accent, var(--brand)) 20%, transparent);
    border-radius: 50%;
    border-top-color: var(--store-accent, var(--brand));
    box-sizing: border-box;
    height: 42px;
    margin: 8px auto 20px;
    width: 42px;
}

.payfast-pending-message {
    margin: 0 auto 8px;
    max-width: 320px;
    text-align: center;
}

@keyframes payfast-pending-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .payfast-pending-spinner {
        animation-duration: 1800ms;
    }
}