:root {
  --maroon: #6b1e1e;
  --maroon-dark: #481010;
  --maroon-soft: #f7eeee;
  --black: #111111;
  --ink: #262020;
  --muted: #6b6161;
  --line: #e9dfdf;
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(40, 10, 10, .10);
  --radius: 22px;
  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
body.admin-body { background: #faf7f7; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { color: var(--black); font-family: "Cormorant Garamond", Georgia, serif; line-height: 1.08; }
h1 { font-size: clamp(2.4rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: 1.45rem; }

.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 10px 16px; background: var(--white); color: var(--maroon); border: 2px solid var(--maroon); }
.skip-link:focus { top: 12px; }
.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; }
.promo-bar { min-height: 34px; padding: 7px 16px; background: var(--maroon); color: var(--white); text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.promo-bar-content { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.promo-special-label { flex: 0 0 auto; padding: 4px 11px; border-radius: 999px; color: #3d2600; background: #ffd21f; font-size: .67rem; font-weight: 900; letter-spacing: .08em; line-height: 1.35; }
.promo-icon { width: 19px; height: 19px; flex: 0 0 19px; fill: #ffd45a; }
.promo-highlight { color: #ffd45a; font-weight: 850; animation: promo-glow 3.2s ease-in-out infinite; }
@keyframes promo-glow {
  0%, 68%, 100% { color: #ffd45a; text-shadow: 0 0 0 rgba(255,212,90,0); }
  80% { color: #ffe98f; text-shadow: 0 0 9px rgba(255,212,90,.72); }
}
.site-header { position: sticky; top: 0; z-index: 80; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; color: var(--white); background: var(--maroon); border-radius: 12px; font-family: Georgia, serif; font-weight: 700; }
.brand-mark.has-image { overflow: hidden; padding: 0; background: transparent; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand strong { display: block; color: var(--maroon); font-family: Georgia, serif; letter-spacing: .07em; }
.brand small { display: block; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; }
.primary-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: .9rem; font-weight: 650; }
.primary-nav a { padding-block: 26px; border-bottom: 2px solid transparent; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--maroon); border-color: var(--maroon); }
.primary-nav .nav-hotel-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-hotel-link small { padding: 2px 6px; border-radius: 999px; color: #3d2600; background: #ffd21f; font-size: .48rem; font-weight: 900; letter-spacing: .06em; line-height: 1.45; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.cart-link { position: relative; min-width: 48px; min-height: 44px; display: inline-grid; place-items: center; padding: 4px; color: var(--maroon); background: transparent; border: 0; border-radius: 10px; font-weight: 800; transition: color .2s ease, transform .2s ease; }
.cart-link svg { width: 32px; height: 32px; fill: currentColor; }
.cart-link span { position: absolute; right: -4px; top: -4px; min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 5px; color: #3b2b00; background: #f4b400; border: 2px solid var(--white); border-radius: 999px; box-shadow: 0 3px 9px rgba(72,16,16,.2); font-size: .68rem; }
.cart-link:hover, .cart-link:focus-visible { color: var(--maroon-dark); transform: translateY(-2px) scale(1.05); }
.cart-link:focus-visible { outline: 3px solid rgba(107,30,30,.18); }
.lang-switch { min-width: 40px; min-height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; font-weight: 800; color: var(--maroon); }
.menu-toggle { display: none; margin-left: auto; border: 1px solid var(--maroon); color: var(--maroon); background: var(--white); min-height: 44px; border-radius: 12px; padding: 0 14px; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: 1px solid var(--maroon); border-radius: 12px; background: var(--maroon); color: var(--white); font-weight: 750; line-height: 1.2; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover, .button:focus-visible { background: var(--maroon-dark); transform: translateY(-1px); }
.button-small { min-height: 42px; padding: 8px 14px; font-size: .82rem; }
.button-light { background: var(--white); color: var(--maroon); border-color: var(--white); }
.button-light:hover, .button-light:focus-visible { background: var(--maroon-soft); color: var(--maroon-dark); }
.button-outline-light { background: transparent; border-color: var(--white); color: var(--white); }
.button-outline-light:hover, .button-outline-light:focus-visible { background: var(--white); color: var(--maroon); }
.button-secondary { background: var(--white); color: var(--maroon); }
.button-outline { background: var(--white); color: var(--maroon); }
.button-outline:hover, .button-outline:focus-visible { background: var(--maroon-soft); color: var(--maroon-dark); }
.button-full { width: 100%; }
.text-link { color: var(--maroon); font-weight: 750; }
.text-link:hover { text-decoration: underline; }

.hero { position: relative; min-height: 610px; background: var(--maroon-dark); overflow: hidden; }
.hero-slide { position: absolute; inset: 0; min-height: 610px; opacity: 0; visibility: hidden; transition: opacity .7s ease; }
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; }
.hero-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(50,6,6,.95), rgba(107,30,30,.75), rgba(17,17,17,.18)); }
.hero-fallback { position: relative; display: flex; background: radial-gradient(circle at 80% 20%, #8b3636, var(--maroon) 45%, var(--maroon-dark)); }
.hero-fallback::after { content: "WM"; position: absolute; right: 5vw; bottom: -9vw; color: rgba(255,255,255,.07); font: 800 clamp(12rem, 35vw, 34rem)/1 Georgia, serif; }
.hero-content { position: relative; z-index: 2; min-height: 610px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; color: var(--white); }
.hero-content h1 { max-width: 820px; margin-bottom: 20px; color: var(--white); }
.hero-content p { max-width: 660px; margin-bottom: 28px; font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,.88); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.carousel-arrow { position: absolute; top: auto; bottom: 18px; z-index: 4; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.75); border-radius: 50%; color: var(--white); background: rgba(72,16,16,.58); font-size: 1.6rem; line-height: 1; transform: none; backdrop-filter: blur(8px); }
.carousel-arrow:hover, .carousel-arrow:focus-visible { background: var(--maroon); }
.carousel-prev { left: 18px; }
.carousel-next { right: 18px; }
.carousel-dots { position: absolute; left: 50%; bottom: 20px; z-index: 4; display: flex; gap: 9px; transform: translateX(-50%); }
.carousel-dots button { width: 11px; height: 11px; padding: 0; border: 1px solid var(--white); border-radius: 50%; background: transparent; }
.carousel-dots button[aria-current="true"] { width: 30px; border-radius: 999px; background: var(--white); }
.eyebrow { display: inline-block; margin-bottom: 12px; color: var(--white); font-size: .76rem; font-weight: 850; text-transform: uppercase; letter-spacing: .18em; }
.eyebrow.maroon { color: var(--maroon); }

.section { padding: 90px 0; }
.section-compact { padding: 52px 0; }
.section-soft { background: var(--maroon-soft); }
.section-heading { max-width: 740px; margin: 0 auto 44px; text-align: center; }
.section-heading h2 { margin-bottom: 12px; }
.why-section, #katalog, #custom-grafir, #ulasan, #cara-pesan { padding-top: 72px; padding-bottom: 72px; }
.why-section .section-heading, #katalog .section-heading, #ulasan .section-heading, #cara-pesan .section-heading { margin-bottom: 36px; }
.heading-row { max-width: none; display: flex; align-items: end; justify-content: space-between; text-align: left; }
.feature-grid, .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feature-card, .steps-grid article { position: relative; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: 0 10px 30px rgba(50,10,10,.04); }
.feature-card > span, .steps-grid article > span { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-bottom: 28px; border-radius: 50%; background: var(--maroon); color: var(--white); font-weight: 800; }
.feature-card p, .steps-grid p { margin-bottom: 0; color: var(--muted); }
.order-step-card { isolation: isolate; min-height: 350px; overflow: hidden; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.order-step-card > :not(.order-step-background) { position: relative; z-index: 2; }
.order-step-background { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.order-step-link { position: absolute !important; inset: 0; z-index: 3 !important; border-radius: inherit; }
.order-step-link:focus-visible { outline: 3px solid #f5c85f; outline-offset: -6px; }
.order-step-card:hover, .order-step-card:focus-within { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(50,10,10,.16); }
.order-step-card.has-background::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(42,8,8,.38), rgba(42,8,8,.82)); }
.order-step-card.has-background { display: flex; flex-direction: column; justify-content: flex-end; border-color: rgba(107,30,30,.25); }
.steps-grid .order-step-card.has-background > span { background: rgba(107,30,30,.92); }
.steps-grid .order-step-card.has-background h3, .steps-grid .order-step-card.has-background p { color: var(--white); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.why-section { background: #fffdfa; }
.why-grid { align-items: stretch; }
.why-card { padding: 36px; border-color: #efdfb5; border-radius: 4px; box-shadow: none; }
.feature-card > .why-icon { width: 58px; height: 58px; margin-bottom: 24px; border-radius: 16px; color: #8a0025; background: #f9e5ea; }
.why-card:nth-child(2) > .why-icon { color: #9b4b00; background: #fff1c6; }
.why-card:nth-child(3) > .why-icon { color: #97002e; background: #fae5eb; }
.why-icon svg { width: 29px; height: 29px; fill: currentColor; }
.why-card h3 { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #eee8e2; color: var(--maroon-dark); font-size: 1.45rem; text-transform: uppercase; }
.why-card ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.why-card li { position: relative; padding-left: 32px; color: #32303a; line-height: 1.45; }
.why-card li::before { content: "✓"; position: absolute; left: 0; top: .15em; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #11a447; font-size: .75rem; font-weight: 900; }
.why-card li strong { font-weight: 800; }
.partner-section { padding: 40px 0; background: var(--white); border-top: 1px solid #f0eaea; border-bottom: 1px solid #f0eaea; }
.partner-section h2 { margin-bottom: 30px; color: var(--maroon); font: 800 .82rem Inter, sans-serif; text-align: center; text-transform: uppercase; letter-spacing: .13em; }
.partner-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 46px; }
.partner-card { width: 150px; min-height: 76px; display: inline-flex; align-items: center; justify-content: center; padding: 8px; transition: transform .2s ease; }
.partner-card img { width: 100%; height: 68px; object-fit: contain; }
a.partner-card:hover, a.partner-card:focus-visible { transform: translateY(-3px) scale(1.03); }
.export-section { padding: 42px 0; background: #f7f8fa; }
.export-heading { margin-bottom: 24px; text-align: center; }
.export-heading h2 { margin: 8px 0 0; font-size: clamp(2rem, 4vw, 3.2rem); }
.country-row, .category-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.country-pill { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 17px; color: #273247; background: var(--white); border: 1px solid #dfe2e7; border-radius: 999px; box-shadow: 0 2px 6px rgba(25,35,50,.06); font-size: .88rem; font-weight: 650; }
.country-flag { width: 25px; height: 18px; object-fit: cover; border: 1px solid rgba(0,0,0,.08); border-radius: 3px; }
.country-code { color: var(--maroon); font-size: .65rem; font-weight: 800; text-transform: uppercase; }
.category-row span { padding: 8px 14px; color: var(--maroon); background: var(--white); border: 1px solid var(--maroon); border-radius: 999px; font-size: .85rem; font-weight: 700; }
.category-row { justify-content: flex-start; margin-bottom: 28px; }

.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.product-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 18px; transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--maroon-soft); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-media img { transform: scale(1.035); }
.media-placeholder { width: 100%; height: 100%; min-height: 220px; display: grid; place-items: center; color: rgba(107,30,30,.38); background: repeating-linear-gradient(135deg, var(--maroon-soft), var(--maroon-soft) 14px, #fff 14px, #fff 28px); font: 800 1.2rem Georgia, serif; letter-spacing: .12em; }
.media-placeholder.large { min-height: 520px; border-radius: var(--radius); }
.product-body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.product-category { margin-bottom: 7px; color: var(--maroon); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.product-body h3 { margin-bottom: 8px; font-size: 1.25rem; }
.product-body p { display: -webkit-box; overflow: hidden; margin-bottom: 18px; color: var(--muted); font-size: .86rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-footer { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; }
.product-footer strong { color: var(--maroon); }
.product-footer .text-link { font-size: .78rem; }
.catalog-intro { padding-bottom: 32px; }
.catalog-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 510px); align-items: end; gap: 38px; }
.catalog-intro h1 { margin: 8px 0 10px; font-size: clamp(2.8rem, 5vw, 5rem); }
.catalog-intro p { margin: 0; color: var(--muted); }
.flash-sale-banner { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid #f0cfd2; border-radius: 18px; color: #760018; background: #fff3f4; }
.flash-sale-banner strong { flex: 0 0 auto; padding: 10px 13px; border-radius: 8px; color: var(--white); background: #e74d57; font-size: .78rem; }
.flash-sale-banner span { font-size: .86rem; font-weight: 700; line-height: 1.5; }
.catalog-section { padding: 12px 0 80px; }
.catalog-category-tabs { display: flex; gap: 10px; margin-bottom: 26px; overflow-x: auto; scrollbar-width: thin; }
.catalog-category-tabs a { min-height: 44px; display: inline-flex; flex: 0 0 auto; align-items: center; padding: 10px 20px; border-radius: 999px; color: #252129; background: #f3f3f5; font-size: .84rem; font-weight: 750; }
.catalog-category-tabs a.active, .catalog-category-tabs a:hover { color: var(--white); background: var(--maroon); }
.catalog-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 34px; padding: 22px; border: 1px solid #ead7c3; border-radius: 18px; background: #fffaf4; }
.catalog-filters label { display: grid; gap: 7px; color: #2d2930; font-size: .78rem; font-weight: 750; }
.catalog-filters input, .catalog-filters select { min-width: 0; }
.catalog-search { grid-column: span 2; }
.catalog-filter-actions { display: flex; align-items: end; gap: 14px; }
.catalog-filter-actions .button { min-height: 48px; }
.catalog-filter-actions a { min-height: 48px; display: inline-flex; align-items: center; color: var(--maroon); font-size: .8rem; font-weight: 750; }
.catalog-product-grid { align-items: stretch; }
.product-badge { position: absolute; z-index: 2; left: 12px; display: inline-flex; align-items: center; padding: 7px 10px; border-radius: 8px; color: var(--white); font-size: .68rem; font-weight: 800; line-height: 1; }
.product-badge.sale { top: 12px; background: #e5222c; }
.product-badge.engraving { bottom: 10px; background: rgba(107,30,30,.94); }
.product-proof { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: #59535b; font-size: .76rem; }
.product-proof i { color: #aaa2a7; font-style: normal; }
.product-rating { color: #e69b00; font-weight: 800; }
.product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.product-price strong { color: #8c001b; font-size: 1.28rem; }
.product-price del { color: #989298; font-size: .76rem; }
.product-actions { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 9px; margin-top: auto; }
.product-actions form { margin: 0; }
.product-actions .button { width: 100%; min-height: 46px; padding: 10px 8px; font-size: .72rem; }
.product-actions button:disabled { cursor: not-allowed; opacity: .55; }
.detail-proof { flex-wrap: wrap; margin: 10px 0; }
.detail-price strong { font-size: 1.8rem; }
.engraving-promo-note { width: fit-content; margin: 0 0 18px; padding: 9px 12px; border-radius: 9px; color: var(--white); background: var(--maroon); font-weight: 800; }
.engraving-promo-note small { display: block; margin-top: 4px; color: rgba(255,255,255,.8); font-weight: 500; }
.empty-state { padding: 58px 24px; border: 1px dashed var(--maroon); border-radius: var(--radius); background: var(--white); text-align: center; }
.empty-state strong { display: block; margin-bottom: 8px; color: var(--maroon); font: 800 1.8rem Georgia, serif; letter-spacing: .1em; }
.empty-state p { max-width: 620px; margin: 0 auto 20px; color: var(--muted); }

.engraving-section { color: var(--white); background: var(--maroon-dark); }
.engraving-section h2 { color: var(--white); }
.engraving-section p { color: rgba(255,255,255,.78); }
.engraving-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: start; }
.engraving-grid > div:first-child { position: sticky; top: 124px; min-width: 0; }
.engraving-preview { position: relative; min-height: 360px; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius); background: linear-gradient(145deg, #fff, #e7dddd); box-shadow: inset 0 0 60px rgba(107,30,30,.16); }
.engraving-preview-product { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #f4eeee; }
.engraving-preview-empty { position: relative; z-index: 1; max-width: 80%; color: var(--maroon-dark); font-weight: 700; text-align: center; }
.engraving-design-text, .engraving-design-image { position: absolute; z-index: 2; left: 50%; top: 50%; max-width: 75%; max-height: 75%; transform: translate(-50%, -50%); opacity: .86; mix-blend-mode: multiply; pointer-events: none; }
.engraving-design-text { color: #2d1212; font: 800 3rem Georgia, serif; line-height: 1; text-align: center; white-space: pre-line; overflow-wrap: anywhere; }
.engraving-design-image { width: 35%; height: auto; object-fit: contain; }
.mockup-note { display: block; margin-top: 10px; color: rgba(255,255,255,.76); font-size: .78rem; line-height: 1.5; }
.calculator { padding: 30px; color: var(--black); background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.calculator label, .stack-form label, .admin-form label { display: grid; gap: 7px; margin-bottom: 16px; font-size: .84rem; font-weight: 750; }
.product-image-picker { margin: -2px 0 18px; }
.product-image-picker > span { display: block; margin-bottom: 8px; font-size: .84rem; font-weight: 750; }
.product-image-options { display: flex; gap: 9px; padding: 3px; overflow-x: auto; }
.product-image-option { width: 72px; height: 72px; flex: 0 0 72px; padding: 3px; overflow: hidden; border: 2px solid var(--line); border-radius: 10px; background: var(--white); }
.product-image-option:hover, .product-image-option:focus-visible { border-color: var(--maroon); }
.product-image-option.is-active { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(107,30,30,.14); }
.product-image-option img { width: 100%; height: 100%; border-radius: 6px; object-fit: cover; }
.design-layer-section { margin: 0 0 18px; }
.design-layer-heading, .design-layer-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.design-layer-heading { margin-bottom: 10px; }
.design-layer-card { margin-bottom: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fffafa; }
.design-layer-card-heading { margin-bottom: 12px; color: var(--maroon); }
.design-layer-card textarea { min-height: 72px; }
.button-outline { min-height: 40px; padding: 8px 12px; border: 1px solid var(--maroon); border-radius: 10px; color: var(--maroon); background: var(--white); font-weight: 750; }
.button-outline:hover, .button-outline:focus-visible { color: var(--white); background: var(--maroon); }
.button-outline:disabled { cursor: not-allowed; opacity: .45; }
.button-compact { font-size: .76rem; }
.layer-remove { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--maroon); background: var(--white); font-size: 1.3rem; line-height: 1; }
.layer-remove:hover, .layer-remove:focus-visible { color: var(--white); background: var(--maroon); }
.layer-limit-note { display: block; margin-top: 4px; color: var(--muted); font-size: .74rem; line-height: 1.5; }
.customer-request-fields { margin: 22px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fffafa; }
.customer-request-fields h3 { margin: 0 0 16px; color: var(--maroon); font-size: 1.25rem; }
.calculator .consent-check { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 10px; margin-bottom: 0; font-weight: 600; line-height: 1.45; }
.consent-check input { width: 20px; min-height: 20px; margin: 2px 0 0; padding: 0; accent-color: var(--maroon); }
.request-save-status { min-height: 24px; margin: 10px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.5; }
.request-save-status.is-success { color: #27613d; }
.request-save-status.is-error { color: #a02323; }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--black); background: var(--white); border: 1px solid #cfc3c3; border-radius: 10px; }
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(107,30,30,.18); border-color: var(--maroon); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mockup-controls { margin: 0 0 18px; padding: 0; border: 0; }
.mockup-controls legend { margin-bottom: 10px; font-size: .84rem; font-weight: 800; }
.mockup-control-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mockup-control-grid.four-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mockup-control-grid label { align-content: start; margin-bottom: 0; }
.mockup-control-grid input[type="range"] { min-height: auto; padding: 0; accent-color: var(--maroon); }
.mockup-control-grid output { color: var(--muted); font-size: .76rem; font-weight: 700; }
.design-file-status { color: var(--maroon); font-size: .76rem; line-height: 1.45; }
.design-file-status.is-error { color: #a02323; }
.estimate-box { display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; margin: 20px 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--maroon-soft); }
.estimate-box strong { color: var(--maroon); text-align: right; }
.estimate-box small { grid-column: 1 / -1; margin-top: 8px; color: var(--muted); }

.hotel-delivery-section { padding-top: 72px; padding-bottom: 72px; background: var(--white); }
.hotel-delivery-card { display: grid; grid-template-columns: .9fr 1.1fr; gap: 42px; align-items: center; overflow: hidden; padding: 48px; color: var(--white); background: linear-gradient(135deg, var(--maroon-dark), var(--maroon) 72%, #7e2929); border-radius: 28px; box-shadow: 0 22px 55px rgba(72,16,16,.2); }
.hotel-delivery-copy h2 { max-width: 570px; margin-bottom: 18px; color: var(--white); }
.hotel-delivery-copy p { max-width: 570px; margin-bottom: 0; color: rgba(255,255,255,.84); font-size: 1.02rem; }
.hotel-delivery-badge { display: table; margin-bottom: 24px; padding: 6px 14px; color: #3b2b00; background: #f7c943; border-radius: 999px; font-size: .72rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.hotel-delivery-panel { padding: 28px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); border-radius: 20px; backdrop-filter: blur(8px); }
.hotel-delivery-panel label { display: grid; gap: 8px; margin-bottom: 18px; color: var(--white); font-size: .86rem; font-weight: 800; }
.hotel-delivery-panel select { border: 0; }
.hotel-delivery-result { margin-bottom: 18px; padding: 4px 18px; color: var(--white); background: rgba(255,255,255,.1); border-radius: 14px; }
.hotel-delivery-result > div { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.18); }
.hotel-delivery-result > div:last-child { border-bottom: 0; }
.hotel-delivery-result span { color: rgba(255,255,255,.77); font-size: .82rem; }
.hotel-delivery-result strong { color: #ffe071; text-align: right; }
.hotel-delivery-cta { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 18px; color: #2b2100; background: #f7c943; border-radius: 12px; font-weight: 850; text-align: center; transition: transform .2s ease, background .2s ease; }
.hotel-delivery-cta:hover, .hotel-delivery-cta:focus-visible { background: #ffda59; transform: translateY(-1px); }
.hotel-delivery-cta[aria-disabled="true"] { cursor: not-allowed; opacity: .55; transform: none; }
.hotel-delivery-panel > small { display: block; margin-top: 13px; color: rgba(255,255,255,.7); font-size: .7rem; line-height: 1.5; }

.review-section { overflow: hidden; background: #fbf8f3; }
.review-heading { max-width: 820px; margin-inline: auto; text-align: center; }
.review-heading p { margin: 12px auto 0; color: var(--muted); font-size: 1.02rem; }
.review-carousel { position: relative; }
.review-viewport { overflow: hidden; padding: 6px 2px 12px; }
.review-track { display: flex; gap: 22px; transition: transform .55s ease; }
.review-card { flex: 0 0 calc((100% - 44px) / 3); min-width: 0; display: flex; flex-direction: column; padding: 26px; border: 1px solid #eadbca; border-radius: 20px; background: var(--white); box-shadow: 0 12px 32px rgba(74, 35, 20, .07); }
.review-author { display: flex; align-items: center; gap: 12px; }
.review-avatar { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 50%; color: var(--white); background: var(--maroon); font: 700 1.15rem Georgia, serif; }
.review-author > span:last-child { min-width: 0; display: grid; }
.review-author strong { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.review-author small { color: var(--muted); font-size: .76rem; }
.review-stars { margin: 18px 0 12px; color: #f4b400; font-size: 1.1rem; letter-spacing: .08em; white-space: nowrap; }
.review-card blockquote { flex: 1; margin: 0 0 22px; color: #393131; font-size: .96rem; font-style: italic; line-height: 1.75; }
.review-source { align-self: flex-start; color: var(--maroon); font-size: .76rem; font-weight: 800; }
.review-source:hover, .review-source:focus-visible { text-decoration: underline; }
.review-controls { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.review-controls > button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0 0 3px; border: 1px solid var(--maroon); border-radius: 50%; color: var(--maroon); background: var(--white); font-size: 1.55rem; line-height: 1; }
.review-controls > button:hover, .review-controls > button:focus-visible { color: var(--white); background: var(--maroon); }
.review-dots { display: flex; gap: 8px; }
.review-dots button { width: 9px; height: 9px; padding: 0; border: 1px solid var(--maroon); border-radius: 999px; background: transparent; }
.review-dots button[aria-current="true"] { width: 25px; background: var(--maroon); }
.review-footer { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 24px; text-align: center; }
.review-footer .button { color: var(--maroon); background: #f7c943; border-color: #d9aa24; box-shadow: 0 8px 20px rgba(217, 170, 36, .22); }
.review-footer .button:hover, .review-footer .button:focus-visible { color: var(--maroon-dark); background: #ffda59; border-color: #c99713; transform: translateY(-2px); }
.review-footer small { max-width: 650px; color: var(--muted); }
.page-hero { padding: 82px 0; color: var(--white); background: var(--maroon); }
.page-hero h1 { margin-bottom: 12px; color: var(--white); font-size: clamp(2.6rem, 6vw, 4.8rem); }
.page-hero p { max-width: 700px; margin-bottom: 0; color: rgba(255,255,255,.8); }
.filter-bar { display: grid; grid-template-columns: 1fr minmax(220px, .4fr) auto; gap: 12px; margin-bottom: 32px; padding: 18px; background: var(--maroon-soft); border-radius: 16px; }
.filter-bar label { margin: 0; }
.product-detail { display: grid; grid-template-columns: 1.05fr .95fr; gap: 58px; align-items: start; }
.product-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.product-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.product-gallery img:first-child { grid-column: 1 / -1; }
.product-info { position: sticky; top: 110px; }
.product-info h1 { margin-bottom: 16px; font-size: clamp(2.2rem, 5vw, 4rem); }
.product-price { color: var(--maroon); font-size: 1.8rem; font-weight: 850; }
.prose { margin: 24px 0; color: var(--muted); }
.spec-list { margin: 24px 0; border-top: 1px solid var(--line); }
.spec-list div { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec-list dt { font-weight: 800; }
.spec-list dd { margin: 0; color: var(--muted); }
.product-buy-form { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: end; margin-bottom: 10px; }
.product-buy-form label { display: grid; gap: 6px; margin: 0; font-size: .8rem; font-weight: 750; }
.product-info > .button { margin-top: 10px; }
.cart-list { display: grid; gap: 14px; }
.cart-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) 130px 150px; gap: 20px; align-items: center; padding: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.cart-item img, .cart-placeholder { width: 110px; height: 110px; object-fit: cover; border-radius: 12px; background: var(--maroon-soft); }
.cart-placeholder { display: grid; place-items: center; color: var(--maroon); font: 800 1.3rem Georgia, serif; }
.cart-item h2 { margin: 0 0 5px; font-size: 1.3rem; }
.cart-item p, .cart-item label { margin: 8px 0 0; }
.cart-item label { display: grid; gap: 5px; font-size: .78rem; font-weight: 750; }
.cart-item small { color: var(--muted); }
.cart-item > strong { color: var(--maroon); text-align: right; }
.cart-footer { display: flex; align-items: center; justify-content: flex-end; gap: 22px; margin-top: 20px; padding: 20px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.cart-footer > div { display: grid; margin-left: auto; }
.cart-footer > div span { color: var(--muted); font-size: .75rem; }
.cart-footer > div strong { color: var(--maroon); font-size: 1.35rem; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 22px; align-items: start; }
.checkout-card { padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.checkout-card h2 { margin-bottom: 20px; }
.checkout-line { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.checkout-line span, .checkout-line small { display: block; }
.checkout-line small { margin-top: 4px; color: var(--muted); }
.checkout-total { display: flex; justify-content: space-between; font-size: 1.15rem; }
.checkout-notice { margin: 18px 0; padding: 16px; color: #684d00; background: #fffbe9; border: 1px solid #cbb352; border-radius: 12px; }
.checkout-notice p { margin: 5px 0 0; }

.site-footer { padding: 64px 0 88px; color: rgba(255,255,255,.72); background: var(--black); }
.brand-footer strong { color: var(--white); }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1.4fr 1fr; gap: 46px; }
.footer-grid h2 { color: var(--white); font: 800 .8rem Inter, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.plain-list { margin: 0; padding: 0; list-style: none; }
.plain-list a:hover { color: var(--white); }
.footer-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.footer-socials > strong { flex-basis: 100%; color: var(--white); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.footer-socials a { min-height: 46px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; color: var(--white); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; transition: background .2s ease, transform .2s ease; }
.footer-socials a:hover, .footer-socials a:focus-visible { background: var(--maroon); transform: translateY(-2px); }
.footer-socials svg { width: 22px; height: 22px; flex: 0 0 22px; fill: currentColor; }
.footer-socials a > span { display: grid; color: var(--white); font-size: .76rem; font-weight: 800; line-height: 1.25; }
.footer-socials small { color: rgba(255,255,255,.68); font-size: .66rem; font-weight: 500; }
.footer-bottom { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); font-size: .78rem; }
.mobile-actions { display: none; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at top, var(--maroon), var(--maroon-dark)); }
.login-card { width: min(100%, 430px); padding: 38px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); }
.login-card h1 { margin: 34px 0 8px; font-size: 2.5rem; }
.login-card > p { color: var(--muted); }
.alert { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--maroon); border-radius: 10px; }
.alert.error { color: var(--maroon-dark); background: var(--maroon-soft); }
.alert.success { color: var(--white); background: var(--maroon); }
.alert ul { margin-bottom: 0; }
.admin-header { position: sticky; top: 0; z-index: 50; background: var(--white); border-bottom: 1px solid var(--line); }
.admin-nav { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.admin-nav nav { display: flex; align-items: center; gap: 15px; font-size: .8rem; font-weight: 700; }
.admin-nav form { margin: 0; }
.link-button { padding: 0; color: var(--maroon); background: none; border: 0; font-weight: 750; }
.link-button.danger { color: var(--maroon-dark); text-decoration: underline; }
.admin-main { padding: 44px 0 80px; }
.admin-title { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.admin-title h1 { margin-bottom: 6px; font-size: 3rem; }
.admin-title p { margin-bottom: 0; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.stat-grid article { padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.stat-grid span { display: block; color: var(--muted); font-size: .8rem; }
.stat-grid strong { color: var(--maroon); font: 800 2.2rem Georgia, serif; }
.admin-panel { margin-bottom: 22px; padding: 26px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.admin-panel h2 { margin-bottom: 20px; font-size: 1.65rem; }
.table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: 16px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.admin-table th, .admin-table td { padding: 15px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.admin-table th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.table-empty { padding: 50px !important; color: var(--muted); text-align: center !important; }
.table-actions { display: flex; align-items: center; gap: 12px; color: var(--maroon); font-size: .82rem; font-weight: 750; }
.table-actions form { margin: 0; }
.order-table td small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.45; }
.pagination { display: flex; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.pagination a { min-width: 36px; min-height: 36px; display: grid; place-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--maroon); background: var(--white); font-weight: 750; }
.pagination .active a { color: var(--white); background: var(--maroon); border-color: var(--maroon); }
.status { display: inline-block; padding: 4px 9px; border: 1px solid var(--maroon); border-radius: 999px; color: var(--maroon); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.status-published { color: var(--white); background: var(--maroon); }
.status-archived { color: var(--muted); border-color: var(--muted); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.form-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.product-taxonomy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.product-taxonomy-grid fieldset { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.product-taxonomy-grid legend { padding: 0 7px; color: var(--maroon); font-weight: 800; }
.taxonomy-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.admin-form .taxonomy-checks .checkbox { display: flex; margin: 0; padding: 8px; border-radius: 8px; background: #fffafa; }
.filter-definition-add { display: grid; grid-template-columns: 1fr 1fr auto auto; align-items: end; gap: 14px; margin-bottom: 20px; }
.filter-definition-add label { display: grid; gap: 7px; margin: 0; font-size: .8rem; font-weight: 750; }
.filter-definition-add .checkbox { display: flex; align-items: center; min-height: 48px; }
.filter-definition-add .button { min-height: 48px; }
.product-filter-admin .admin-table input { min-width: 180px; }
.product-filter-admin .checkbox.compact { display: flex; align-items: center; gap: 7px; margin: 0; }
.home-content-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.home-content-card-editor { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fffafa; }
.home-content-card-editor h3 { color: var(--maroon); font-size: 1.2rem; }
.home-content-card-editor textarea { min-height: 260px; }
.order-copy-editor textarea { min-height: 120px; }
.order-image-editor-grid { margin-top: 22px; }
.order-image-editor h3 { min-height: 2.5em; }
.order-image-preview { position: relative; display: grid; place-items: center; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--maroon-soft); }
.order-image-preview img { width: 100%; height: 100%; object-fit: cover; }
.order-image-preview span { color: var(--muted); font-weight: 700; }
.order-image-preview:not(.is-empty) span { display: none; }
.admin-gallery-grid { display: grid; grid-template-columns: repeat(5, minmax(130px, 1fr)); gap: 14px; margin-bottom: 24px; }
.admin-gallery-item { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.admin-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.admin-form .gallery-choice { display: flex; align-items: center; gap: 7px; margin: 0; padding: 10px 12px; font-size: .72rem; }
.admin-form .gallery-choice + .gallery-choice { border-top: 1px solid var(--line); }
.admin-form .gallery-choice.remove { color: #9b1c1c; }
.gallery-choice input { width: 17px; min-height: 17px; }
.gallery-upload input[type="file"] { padding: 14px; border: 1px dashed var(--maroon); border-radius: 12px; background: var(--white); }
.gallery-upload small, .gallery-empty { color: var(--muted); font-weight: 500; line-height: 1.5; }
.admin-form label small, .settings-note { color: var(--muted); font-weight: 500; line-height: 1.5; }
.settings-note { margin: 4px 0 0; }
.banner-preview-stage { width: min(100%, 900px); margin-bottom: 14px; }
.banner-admin-preview { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border: 1px solid var(--line); border-radius: 14px; }
.banner-remove { width: fit-content; margin-bottom: 20px !important; color: #9b1c1c; }
.banner-empty { margin-bottom: 18px; padding: 24px; color: var(--muted); background: var(--maroon-soft); border: 1px dashed var(--maroon); border-radius: 14px; }
.banner-preview-stage .banner-empty { margin-bottom: 0; }
.site-identity-editor { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: center; margin-bottom: 24px; }
.site-logo-preview { width: 150px; height: 150px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fffafa; }
.site-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.site-logo-preview span { width: 82px; height: 82px; display: grid; place-items: center; border-radius: 22px; color: var(--white); background: var(--maroon); font: 700 1.8rem Georgia, serif; }
.is-hidden { display: none !important; }
.banner-position-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.banner-position-grid input[type="range"] { min-height: 36px; padding: 0; accent-color: var(--maroon); }
.banner-admin-list { display: grid; gap: 18px; }
.banner-list-card { display: grid; grid-template-columns: 260px 1fr auto; gap: 22px; align-items: center; overflow: hidden; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.banner-list-card > img, .banner-list-placeholder { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-radius: 12px; }
.banner-list-placeholder { display: grid; place-items: center; color: rgba(107,30,30,.5); background: var(--maroon-soft); font: 800 1.15rem Georgia, serif; letter-spacing: .1em; }
.banner-list-content { min-width: 0; }
.banner-list-content .status { margin-right: 10px; }
.banner-list-content small { color: var(--muted); }
.banner-list-content h2 { margin: 12px 0 6px; font-size: 1.55rem; }
.banner-list-content p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--muted); font-size: .84rem; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.banner-list-actions { display: grid; grid-template-columns: repeat(2, auto); gap: 8px; align-items: center; }
.banner-list-actions form { margin: 0; }
.banner-list-actions .danger { justify-self: center; }
.banner-limit-note { margin-top: 16px; text-align: center; }
.admin-title.compact { align-items: center; margin-bottom: 20px; }
.admin-title.compact h2 { margin-bottom: 5px; }
.marketing-admin-list { display: grid; gap: 14px; }
.marketing-list-card { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fffafa; }
.marketing-list-card > img, .flag-code-preview { width: 120px; height: 82px; object-fit: contain; padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.marketing-list-card > img.flag-preview { object-fit: cover; }
.flag-code-preview { display: grid; place-items: center; color: var(--maroon); font: 800 1.4rem Inter, sans-serif; }
.marketing-list-card small { margin-left: 9px; color: var(--muted); }
.marketing-list-card h3 { margin: 10px 0 4px; font-size: 1.35rem; }
.marketing-list-card p { margin: 0; color: var(--muted); }
.marketing-form-preview { width: min(100%, 300px); min-height: 130px; display: grid; place-items: center; margin-bottom: 20px; padding: 18px; background: #fffafa; border: 1px solid var(--line); border-radius: 14px; }
.marketing-form-preview img { max-height: 120px; object-fit: contain; }
.marketing-form-preview.flag img { width: 180px; height: 110px; object-fit: cover; border-radius: 8px; }
.button:disabled { cursor: not-allowed; opacity: .38; transform: none; }
.span-2 { grid-column: span 2; }
.checkbox { display: flex !important; align-items: center; align-self: end; min-height: 46px; gap: 10px !important; }
.checkbox input { width: 20px; min-height: 20px; }
.form-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 12px; padding: 16px 0; background: rgba(250,247,247,.94); backdrop-filter: blur(12px); }
.button.small { min-height: 36px; padding: 8px 14px; font-size: .76rem; }
.engraving-admin-filter { max-width: 320px; margin: 0 0 18px; }
.engraving-admin-filter label { display: block; margin-bottom: 7px; font-size: .8rem; font-weight: 750; }
.engraving-request-table td small, .engraving-admin-facts small, .engraving-file-list small { display: block; margin-top: 5px; color: var(--muted); line-height: 1.45; }
.status-new { color: #8a4b00; border-color: #d79b4b; background: #fff6e8; }
.status-reviewing { color: #17466f; border-color: #7da7cc; background: #edf7ff; }
.status-awaiting_customer { color: #684d00; border-color: #cbb352; background: #fffbe9; }
.status-awaiting_confirmation { color: #684d00; border-color: #cbb352; background: #fffbe9; }
.status-processing { color: #17466f; border-color: #7da7cc; background: #edf7ff; }
.status-ready_to_ship { color: #714d00; border-color: #d3ad4a; background: #fff8df; }
.status-shipped { color: #17466f; border-color: #669bc6; background: #eaf5ff; }
.status-revision_requested { color: #8b281c; border-color: #d58b82; background: #fff0ee; }
.status-approved { color: #165c38; border-color: #78b894; background: #edf9f2; }
.status-completed { color: var(--white); border-color: var(--maroon); background: var(--maroon); }
.status-cancelled { color: var(--muted); border-color: #aaa; background: #f1f1f1; }
.engraving-admin-detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 22px; align-items: start; }
.engraving-admin-preview img { width: 100%; margin-bottom: 14px; border-radius: 12px; background: var(--maroon-soft); }
.engraving-admin-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0; }
.engraving-admin-facts.cols-3 { grid-template-columns: repeat(3, 1fr); }
.engraving-admin-facts .wide { grid-column: 1 / -1; }
.engraving-admin-facts dt { margin-bottom: 5px; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.engraving-admin-facts dd { margin: 0; font-weight: 700; line-height: 1.55; }
.engraving-status-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.order-status-form { margin: 18px 0; }
.order-status-form textarea { min-height: 80px; }
.shipping-form { max-width: 860px; margin-top: 22px; }
.shipping-form textarea { min-height: 80px; }
.engraving-element-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.engraving-element-grid article { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--maroon-soft); }
.engraving-element-grid h3 { margin: 9px 0 4px; font-size: 1.25rem; }
.engraving-element-grid p { margin: 0 0 8px; color: var(--muted); }
.engraving-element-grid small { color: var(--muted); line-height: 1.55; }
.engraving-file-list { display: grid; gap: 10px; }
.engraving-file-list article { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; }
.engraving-revision-form { max-width: 720px; margin: 20px 0 28px; }
.engraving-share-box { margin: 24px 0; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--maroon-soft); }
.engraving-share-box > label { display: block; margin-bottom: 8px; font-weight: 800; }
.engraving-share-box > div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; }
.engraving-revision-list { display: grid; gap: 12px; }
.engraving-revision-list article { padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.engraving-revision-list article > div:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.engraving-revision-list p { margin: 12px 0; color: var(--muted); }
.status-pending { color: #684d00; border-color: #cbb352; background: #fffbe9; }
.status-superseded { color: var(--muted); border-color: #aaa; background: #f1f1f1; }
.approval-body { min-height: 100vh; background: #faf7f7; }
.approval-header { padding: 18px 0; background: var(--white); border-bottom: 1px solid var(--line); }
.approval-main { padding-top: 52px; padding-bottom: 80px; }
.approval-heading { max-width: 760px; margin-bottom: 28px; }
.approval-heading h1 { margin: 10px 0; font-size: clamp(2.5rem, 6vw, 4.5rem); }
.approval-heading p { color: var(--muted); }
.approval-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items: start; }
.approval-card { padding: 28px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; }
.approval-card h2 { margin-bottom: 18px; }
.approval-image img { width: 100%; border-radius: 12px; background: var(--maroon-soft); }
.approval-version { width: fit-content; margin-bottom: 12px; padding: 6px 10px; color: var(--white); background: var(--maroon); border-radius: 999px; font-size: .75rem; font-weight: 800; }
.approval-image p { margin: 16px 0 0; color: var(--muted); }
.approval-card label { display: grid; gap: 8px; font-weight: 750; }
.approval-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }

/* WOOD MOOD customer-service assistant */
.ai-chat { position: fixed; right: 22px; bottom: 22px; z-index: 160; }
.ai-chat-launcher { min-width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border: 0; border-radius: 999px; color: var(--white); background: var(--maroon); box-shadow: 0 12px 30px rgba(72,16,16,.3); font-weight: 800; transition: transform .2s ease, background .2s ease; }
.ai-chat-launcher:hover, .ai-chat-launcher:focus-visible { background: var(--maroon-dark); transform: translateY(-2px); }
.ai-chat-launcher svg { width: 25px; height: 25px; fill: currentColor; }
.ai-chat-launcher-copy { display: grid; gap: 1px; text-align: left; line-height: 1.12; }
.ai-chat-launcher-label { color: var(--white); font-size: .88rem; font-weight: 850; }
.ai-chat-launcher-copy small { display: flex; align-items: center; gap: 5px; color: rgba(255,255,255,.78); font-size: .61rem; font-weight: 650; }
.ai-online-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #73d68c; box-shadow: 0 0 0 3px rgba(115,214,140,.18); animation: ai-online-pulse 2.4s ease-in-out infinite; }
@keyframes ai-online-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(115,214,140,.16); }
  50% { box-shadow: 0 0 0 6px rgba(115,214,140,.04); }
}
.ai-chat-launcher[aria-expanded="true"] { transform: scale(.92); }
.ai-chat-panel { position: absolute; right: 0; bottom: 72px; width: min(380px, calc(100vw - 32px)); overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 65px rgba(40,10,10,.22); }
.ai-chat-header { min-height: 74px; display: flex; align-items: center; gap: 11px; padding: 14px 16px; color: var(--white); background: var(--maroon); }
.ai-chat-header strong { display: block; color: var(--white); line-height: 1.25; }
.ai-chat-header small { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.82); font-size: .72rem; }
.ai-chat-header small span { width: 7px; height: 7px; border-radius: 50%; background: #73d68c; box-shadow: 0 0 0 3px rgba(115,214,140,.18); }
.ai-chat-avatar { width: 39px; height: 39px; display: grid; place-items: center; flex: 0 0 39px; color: var(--maroon); background: var(--white); border-radius: 12px; font: 800 .78rem Georgia, serif; }
.ai-chat-header > button { width: 38px; height: 38px; margin-left: auto; padding: 0; border: 0; border-radius: 50%; color: var(--white); background: transparent; font-size: 1.65rem; line-height: 1; }
.ai-chat-header > button:hover, .ai-chat-header > button:focus-visible { background: rgba(255,255,255,.13); }
.ai-chat-messages { height: min(390px, calc(100vh - 270px)); min-height: 270px; display: flex; flex-direction: column; gap: 11px; overflow-y: auto; padding: 18px 16px; background: #fffafa; }
.ai-chat-message { max-width: 88%; padding: 11px 13px; border-radius: 14px; font-size: .84rem; line-height: 1.5; white-space: pre-line; }
.ai-chat-message.is-assistant { align-self: flex-start; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ai-chat-message.is-user { align-self: flex-end; color: var(--white); background: var(--maroon); border-bottom-right-radius: 4px; }
.ai-chat-source { display: block; margin-top: 8px; color: var(--maroon); font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ai-usage-panel > h3 { margin: 0 0 14px; font-size: 1rem; }
.ai-usage-grid article { height: 100%; }
.ai-usage-grid small { display: block; margin-top: 5px; color: var(--muted); }
.ai-usage-details { margin-top: 22px; }
.ai-usage-details summary { color: var(--maroon); font-weight: 800; cursor: pointer; }
.ai-usage-details .table-wrap { margin-top: 14px; }
.ai-chat-message-actions { max-width: 90%; display: flex; align-self: flex-start; flex-wrap: wrap; gap: 7px; }
.ai-chat-message-actions a { min-height: 36px; display: inline-flex; align-items: center; padding: 7px 11px; border: 1px solid var(--maroon); border-radius: 10px; color: var(--maroon); background: var(--white); font-size: .74rem; font-weight: 800; }
.ai-chat-message-actions a:hover, .ai-chat-message-actions a:focus-visible { color: var(--white); background: var(--maroon); }
.ai-chat-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.ai-chat-suggestions button { min-height: 34px; padding: 7px 10px; border: 1px solid #d9bcbc; border-radius: 999px; color: var(--maroon); background: var(--white); font-size: .72rem; font-weight: 750; }
.ai-chat-suggestions button:hover, .ai-chat-suggestions button:focus-visible { color: var(--white); background: var(--maroon); border-color: var(--maroon); }
.ai-chat-form { display: grid; grid-template-columns: 1fr 44px; gap: 8px; padding: 12px 13px 7px; border-top: 1px solid var(--line); background: var(--white); }
.ai-chat-form input { min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; outline: none; }
.ai-chat-form input:focus { border-color: var(--maroon); box-shadow: 0 0 0 3px rgba(107,30,30,.1); }
.ai-chat-form button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; color: var(--white); background: var(--maroon); font-size: 1.2rem; }
.ai-chat-note { margin: 0; padding: 0 14px 11px; color: var(--muted); background: var(--white); font-size: .64rem; text-align: center; }
.faq-answer-preview { display: -webkit-box; max-width: 370px; overflow: hidden; margin-top: 5px; color: var(--muted); font-weight: 400; line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.faq-actions { flex-wrap: wrap; min-width: 150px; }
.faq-actions .link-button:disabled { cursor: default; opacity: .3; }
.faq-fallback { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 16px 18px; border: 1px dashed var(--maroon); border-radius: 14px; background: var(--maroon-soft); }
.faq-fallback p { margin: 5px 0 0; color: var(--muted); }

@media (max-width: 980px) {
  .why-section, #katalog, #custom-grafir, #hotel-delivery, #ulasan, #cara-pesan { padding-top: 60px; padding-bottom: 60px; }
  .partner-section { padding-top: 36px; padding-bottom: 36px; }
  .export-section { padding-top: 40px; padding-bottom: 40px; }
  .primary-nav { position: absolute; left: 16px; right: 16px; top: 72px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
  .primary-nav.is-open { display: flex; }
  .primary-nav a { padding: 12px; border: 0; }
  .menu-toggle { display: inline-flex; align-items: center; }
  .nav-actions .button { display: none; }
  .feature-grid, .steps-grid { grid-template-columns: 1fr 1fr; }
  .review-card { flex-basis: calc((100% - 22px) / 2); }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .catalog-intro-grid { grid-template-columns: 1fr; }
  .catalog-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-definition-add { grid-template-columns: 1fr 1fr; }
  .engraving-grid, .product-detail { grid-template-columns: 1fr; }
  .hotel-delivery-card { grid-template-columns: 1fr; gap: 28px; padding: 38px; }
  .engraving-grid > div:first-child { position: static; }
  .checkout-grid { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 90px minmax(0, 1fr) 120px; }
  .cart-item img, .cart-placeholder { width: 90px; height: 90px; }
  .cart-item > strong { grid-column: 2 / -1; }
  .product-info { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .form-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .home-content-card-grid { grid-template-columns: 1fr; }
  .admin-gallery-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .banner-list-card { grid-template-columns: 210px 1fr; }
  .marketing-list-card { grid-template-columns: 100px minmax(0, 1fr); }
  .marketing-list-card > img, .flag-code-preview { width: 100px; }
  .marketing-list-card .banner-list-actions { grid-column: 1 / -1; }
  .engraving-admin-detail { grid-template-columns: 1fr; }
  .engraving-element-grid { grid-template-columns: repeat(2, 1fr); }
  .approval-grid { grid-template-columns: 1fr; }
  .banner-list-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; }
}

@media (max-width: 680px) {
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .promo-bar { padding-inline: 8px; font-size: .68rem; }
  .promo-bar-content { gap: 5px; }
  .promo-special-label { padding: 3px 7px; font-size: .54rem; letter-spacing: .05em; }
  .promo-icon { width: 16px; height: 16px; flex-basis: 16px; }
  .nav-wrap { min-height: 66px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand small { display: none; }
  .hero, .hero-slide, .hero-content { min-height: 590px; }
  .hero-content { padding-top: 30px; padding-bottom: 30px; }
  .hero-content h1 { font-size: clamp(2.65rem, 14vw, 4.1rem); }
  .hero-actions { width: 100%; }
  .hero-actions .button { flex: 1 1 100%; }
  .section { padding: 64px 0; }
  .why-section, #katalog, #custom-grafir, #hotel-delivery, #ulasan, #cara-pesan { padding-top: 48px; padding-bottom: 48px; }
  .partner-section { padding-top: 32px; padding-bottom: 32px; }
  .export-section { padding-top: 36px; padding-bottom: 36px; }
  .section-heading { margin-bottom: 30px; }
  .heading-row { align-items: start; gap: 14px; }
  .feature-grid, .steps-grid { grid-template-columns: 1fr; }
  .review-track { gap: 14px; }
  .review-card { flex-basis: 100%; padding: 22px; }
  .product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product-body { padding: 14px; }
  .product-body h3 { font-size: 1.05rem; }
  .product-footer { display: grid; }
  .catalog-intro { padding-bottom: 26px; }
  .catalog-intro h1 { font-size: clamp(2.6rem, 13vw, 4.2rem); }
  .flash-sale-banner { align-items: flex-start; flex-direction: column; }
  .catalog-section { padding-bottom: 58px; }
  .catalog-filters { grid-template-columns: 1fr; padding: 16px; }
  .catalog-search { grid-column: span 1; }
  .catalog-filter-actions { align-items: center; }
  .product-category { font-size: .62rem; }
  .product-proof { align-items: flex-start; flex-direction: column; gap: 2px; }
  .product-proof i { display: none; }
  .product-price { display: grid; gap: 2px; }
  .product-price strong { font-size: 1.04rem; }
  .product-actions { grid-template-columns: 1fr; }
  .product-actions .button { min-height: 42px; font-size: .66rem; }
  .product-buy-form { grid-template-columns: 90px 1fr; }
  .cart-item { grid-template-columns: 72px 1fr; gap: 12px; }
  .cart-item img, .cart-placeholder { width: 72px; height: 72px; }
  .cart-item label, .cart-item > strong { grid-column: 2; text-align: left; }
  .cart-footer { align-items: stretch; flex-direction: column; }
  .cart-footer > div { margin-left: 0; }
  .media-placeholder { min-height: 150px; }
  .engraving-grid { gap: 32px; }
  .calculator { padding: 20px; }
  .hotel-delivery-card { gap: 24px; padding: 24px 20px; border-radius: 22px; }
  .hotel-delivery-panel { padding: 18px; }
  .hotel-delivery-badge { margin-bottom: 20px; font-size: .62rem; }
  .hotel-delivery-result { padding-inline: 14px; }
  .hotel-delivery-result > div { min-height: 50px; }
  .field-grid { grid-template-columns: 1fr 1fr; }
  .engraving-preview { min-height: 310px; }
  .mockup-control-grid { grid-template-columns: 1fr; }
  .mockup-control-grid.four-controls { grid-template-columns: 1fr 1fr; }
  .filter-bar { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .mobile-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; min-height: 66px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -8px 30px rgba(40,10,10,.1); }
  .mobile-actions a { min-height: 50px; display: grid; place-items: center; align-content: center; color: var(--maroon); font-size: .67rem; font-weight: 750; }
  .mobile-actions span { font-size: 1.1rem; line-height: 1; }
  .mobile-cart-icon { width: 21px; height: 21px; fill: currentColor; }
  .admin-nav nav a { display: none; }
  .admin-title { align-items: start; flex-direction: column; }
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .form-grid, .form-grid.cols-4 { grid-template-columns: 1fr; }
  .product-taxonomy-grid, .filter-definition-add { grid-template-columns: 1fr; }
  .taxonomy-checks { grid-template-columns: 1fr; }
  .banner-position-grid { grid-template-columns: 1fr; }
  .site-identity-editor { grid-template-columns: 1fr; }
  .banner-list-card { grid-template-columns: 1fr; }
  .partner-grid { gap: 12px; }
  .partner-card { width: calc(33.333% - 8px); min-height: 66px; padding: 5px; }
  .partner-card img { height: 58px; }
  .country-row { justify-content: flex-start; }
  .country-pill { flex: 1 1 calc(50% - 5px); justify-content: center; }
  .marketing-list-card { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .marketing-list-card > img, .flag-code-preview { width: 76px; height: 66px; }
  .carousel-arrow { top: auto; bottom: 12px; width: 34px; height: 34px; font-size: 1.5rem; transform: none; background: rgba(72,16,16,.72); }
  .carousel-prev { left: 12px; }
  .carousel-next { right: 12px; }
  .admin-gallery-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .span-2 { grid-column: span 1; }
  .admin-panel { padding: 18px; }
  .engraving-admin-facts, .engraving-admin-facts.cols-3, .engraving-element-grid { grid-template-columns: 1fr; }
  .engraving-status-form { grid-template-columns: 1fr; }
  .engraving-file-list article { align-items: flex-start; flex-direction: column; }
  .engraving-share-box > div, .approval-actions { grid-template-columns: 1fr; }
  .ai-chat { right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); }
  .ai-chat-launcher { min-width: 54px; height: 56px; padding: 0 15px; }
  .ai-chat-launcher-label { font-size: .82rem; }
  .ai-chat-panel { position: fixed; left: 10px; right: 10px; bottom: calc(140px + env(safe-area-inset-bottom)); width: auto; }
  .ai-chat-messages { height: min(380px, calc(100vh - 300px)); }
  .faq-fallback { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 390px) {
  .product-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}