/* =========================================================
  MamaME Designer – Landing Page
  CLEANED / RESPONSIVE VERSION
========================================================= */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --bg: #f8f4f1;
   --bg-soft: #f3ece7;

   --surface: #ffffff;
   --surface-warm: #fbf7f4;

   --text: #2f2927;
   --text-soft: #766d68;

   --line: #e8ddd7;

   --accent: #c98278;
   --accent-dark: #ad6d65;
   --accent-soft: #ead0ca;

   --shadow:
       0 18px 50px
       rgba(60, 44, 38, 0.08);

   --radius: 22px;
   --radius-small: 14px;

   --max-width: 1380px;
}


/* =========================================================
  BASE
========================================================= */

html {
   scroll-behavior: smooth;
}

body {
   min-width: 0;

   background: var(--bg);
   color: var(--text);

   font-family:
       Arial,
       Helvetica,
       sans-serif;

   line-height: 1.6;

   overflow-x: hidden;
}

a {
   color: inherit;
   text-decoration: none;
}

img {
   display: block;
   max-width: 100%;
}

button,
input {
   font: inherit;
}

button,
a {
   -webkit-tap-highlight-color: transparent;
}


/* =========================================================
  TYPOGRAPHY
========================================================= */

h1,
h2,
h3,
.brand-main,
.brand-section span {
   font-family:
       Georgia,
       "Times New Roman",
       serif;

   font-weight: 400;
}

h1,
h2 {
   line-height: 1.08;
}

.section-kicker {
   display: inline-block;

   margin-bottom: 14px;

   color: var(--accent);

   font-size: 0.78rem;
   font-weight: 700;

   letter-spacing: 0.18em;
   text-transform: uppercase;
}

.section-heading {
   max-width: 760px;

   margin-bottom: 52px;
}

.section-heading.centered {
   margin-left: auto;
   margin-right: auto;

   text-align: center;
}

.section-heading h2 {
   margin-bottom: 20px;

   font-size:
       clamp(
           2.2rem,
           5vw,
           4.1rem
       );
}

.section-heading h2 em {
   display: block;

   color: var(--accent);

   font-style: normal;
}

.section-heading p {
   color: var(--text-soft);

   font-size: 1.04rem;
}


/* =========================================================
  GLOBAL LAYOUT
========================================================= */

.section {
   width:
       min(
           calc(100% - 48px),
           var(--max-width)
       );

   margin: 0 auto;

   padding: 110px 0;
}

.button {
   display: inline-flex;

   align-items: center;
   justify-content: center;

   gap: 12px;

   min-height: 52px;

   padding: 0 24px;

   border: none;
   border-radius: 12px;

   cursor: pointer;

   font-size: 0.82rem;
   font-weight: 700;

   letter-spacing: 0.04em;
   text-transform: uppercase;

   transition:
       transform 0.2s ease,
       box-shadow 0.2s ease,
       background 0.2s ease;
}

.button:hover {
   transform:
       translateY(-2px);
}

.button-primary {
   background:
       var(--accent);

   color: #fff;

   box-shadow:
       0 10px 30px
       rgba(201, 130, 120, 0.25);
}

.button-primary:hover {
   background:
       var(--accent-dark);
}

.button-secondary {
   border:
       1px solid
       rgba(47, 41, 39, 0.16);

   background:
       rgba(255, 255, 255, 0.7);

   color:
       var(--text);

   backdrop-filter:
       blur(8px);
}

.button-dark {
   background:
       var(--text);

   color: #fff;
}

.section-action {
   margin-top: 46px;

   text-align: center;
}


/* =========================================================
  HEADER
========================================================= */

.landing-header {
   position: sticky;

   top: 0;

   z-index: 1000;

   display: grid;

   grid-template-columns:
       auto
       minmax(0, 1fr)
       auto;

   align-items: center;

   gap: 36px;

   width: 100%;

   min-height: 78px;

   padding: 0 5vw;

   background:
       rgba(255, 255, 255, 0.94);

   border-bottom:
       1px solid
       rgba(47, 41, 39, 0.06);

   backdrop-filter:
       blur(15px);
}

.landing-brand {
   display: flex;

   flex-direction: column;

   align-items: center;

   line-height: 1;
}

.brand-main {
   font-size: 1.8rem;

   letter-spacing: -0.04em;
}

.brand-main span {
   color: var(--accent);
}

.brand-sub {
   margin-top: 7px;

   font-size: 0.58rem;
   font-weight: 700;

   letter-spacing: 0.38em;
}

.landing-nav {
   display: flex;

   justify-content: center;

   gap: 34px;
}

.landing-nav a {
   position: relative;

   font-size: 0.75rem;
   font-weight: 600;

   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.landing-nav a::after {
   content: "";

   position: absolute;

   left: 0;
   bottom: -7px;

   width: 0;
   height: 1px;

   background:
       var(--accent);

   transition:
       width 0.2s ease;
}

.landing-nav a:hover::after {
   width: 100%;
}

.header-cta {
   display: inline-flex;

   align-items: center;
   justify-content: center;

   min-height: 44px;

   padding: 0 20px;

   border-radius: 11px;

   background:
       var(--accent);

   color: #fff;

   font-size: 0.72rem;
   font-weight: 700;

   letter-spacing: 0.04em;
   text-transform: uppercase;
}


/* =========================================================
  HERO
========================================================= */

.hero {
   position: relative;

   min-height: 670px;

   display: flex;

   align-items: center;

   overflow: hidden;

   background:
       linear-gradient(
           90deg,
           rgba(249, 245, 242, 0.98) 0%,
           rgba(249, 245, 242, 0.90) 32%,
           rgba(249, 245, 242, 0.35) 58%,
           rgba(249, 245, 242, 0.04) 100%
       ),
       url("../images/walls/oliva-harmonia.png")
       center right /
       cover
       no-repeat;
}

.hero-overlay {
   position: absolute;

   inset: 0;

   pointer-events: none;

   background:
       linear-gradient(
           to bottom,
           transparent 70%,
           rgba(248, 244, 241, 0.3)
       );
}

.hero-content {
   position: relative;

   z-index: 2;

   width:
       min(
           calc(100% - 48px),
           var(--max-width)
       );

   margin: 0 auto;
}

.hero-content > * {
   max-width: 650px;
}

.hero h1 {
   max-width: 720px;

   margin-bottom: 24px;

   font-size:
       clamp(
           2.8rem,
           5.6vw,
           5.2rem
       );

   letter-spacing: -0.035em;
}

.hero p {
   max-width: 560px;

   margin-bottom: 34px;

   color: #514a46;

   font-size: 1.06rem;
}

.hero-actions {
   display: flex;

   flex-wrap: wrap;

   gap: 14px;
}


/* =========================================================
  VISUAL FLOW
========================================================= */

.visual-flow {
   padding-top: 120px;
}

.flow-grid {
   display: grid;

   grid-template-columns:
       minmax(0, 1fr)
       auto
       minmax(0, 1fr)
       auto
       minmax(0, 1fr);

   align-items: center;

   gap: 28px;
}

.flow-card {
   min-width: 0;

   text-align: center;
}

.flow-image {
   position: relative;

   height: 280px;

   overflow: hidden;

   border:
       1px solid
       var(--line);

   border-radius:
       var(--radius-small);

   background:
       #f7f3f0;

   box-shadow:
       var(--shadow);
}

.flow-image img {
   width: 100%;
   height: 100%;

   object-fit: cover;
}

.flow-card h3 {
   margin-top: 16px;

   font-family:
       Arial,
       Helvetica,
       sans-serif;

   font-size: 0.78rem;
   font-weight: 700;

   letter-spacing: 0.05em;
   text-transform: uppercase;
}

.flow-arrow {
   display: grid;

   place-items: center;

   width: 40px;
   height: 40px;

   border-radius: 50%;

   background: #e7d5c7;

   font-size: 1.15rem;
}


/* =========================================================
  HOW IT WORKS
========================================================= */

.how-section {
   padding-top: 70px;
}

.steps-grid {
   display: grid;

   grid-template-columns:
       repeat(
           4,
           minmax(0, 1fr)
       );

   overflow: hidden;

   border:
       1px solid
       var(--line);

   border-radius:
       var(--radius);

   background:
       rgba(255, 255, 255, 0.66);

   box-shadow:
       0 15px 45px
       rgba(60, 44, 38, 0.05);
}

.step-card {
   position: relative;

   min-width: 0;
   min-height: 250px;

   padding: 40px 32px;
}

.step-card:not(:last-child) {
   border-right:
       1px solid
       var(--line);
}

.step-number {
   display: block;

   margin-bottom: 28px;

   color: #d4a78d;

   font-family:
       Georgia,
       "Times New Roman",
       serif;

   font-size: 2rem;
}

.step-card h3 {
   margin-bottom: 12px;

   font-size: 1.5rem;
}

.step-card p {
   color:
       var(--text-soft);

   font-size: 0.94rem;
}

/* =========================================================
  DESIGNER SHOWCASE
========================================================= */

.designer-showcase {
   display: grid;

   grid-template-columns:
       minmax(0, 1.15fr)
       minmax(0, 1fr);

   align-items: center;

   gap: 70px;
}

.designer-preview {
   min-width: 0;
}

.preview-window {
   overflow: hidden;

   border:
       1px solid
       var(--line);

   border-radius: 18px;

   background: #fff;

   box-shadow:
       0 26px 80px
       rgba(55, 42, 36, 0.14);
}

.preview-topbar {
   display: flex;

   align-items: center;

   gap: 7px;

   height: 42px;

   padding: 0 16px;

   background: #f1ece8;

   border-bottom:
       1px solid
       var(--line);
}

.preview-topbar span {
   width: 9px;
   height: 9px;

   border-radius: 50%;

   background: #c4bbb6;
}

.preview-content {
   display: grid;

   grid-template-columns:
       110px
       minmax(0, 1fr);

   min-height: 420px;
}

.preview-sidebar {
   display: flex;

   flex-direction: column;

   gap: 12px;

   width: 110px;

   padding: 14px;

   background: #f7f3f0;

   border-right:
       1px solid
       var(--line);
}

.preview-sidebar div {
   display: flex;

   align-items: center;
   justify-content: center;

   width: 100%;

   aspect-ratio: 1 / 1;

   overflow: hidden;

   border:
       1px solid
       var(--line);

   border-radius: 10px;

   background: #fff;
}

.preview-sidebar img {
   width: 100%;
   height: 100%;

   object-fit: contain;

   padding: 6px;
}

.preview-room {
   position: relative;

   display: grid;

   place-items: center;

   min-height: 420px;

   overflow: hidden;

   background: #f7f3f0;
}

.preview-room img {
   width: 100%;
   height: 100%;

   object-fit: cover;
}

.designer-copy {
   min-width: 0;
}

.designer-copy h2 {
   max-width: 580px;

   margin-bottom: 20px;

   font-size:
       clamp(
           2.6rem,
           5vw,
           4.6rem
       );
}

.designer-lead {
   margin-bottom: 32px;

   font-size: 1rem;
   font-weight: 700;

   letter-spacing: 0.08em;

   text-transform: uppercase;
}

.feature-grid {
   display: grid;

   grid-template-columns:
       repeat(
           2,
           minmax(0, 1fr)
       );

   gap: 15px 25px;

   margin-bottom: 34px;
}

.feature-grid span {
   color:
       var(--text-soft);

   font-size: 0.92rem;
}

.text-link {
   display: inline-flex;

   align-items: center;

   gap: 10px;

   padding-bottom: 4px;

   border-bottom:
       1px solid
       var(--accent);

   color:
       var(--accent-dark);

   font-weight: 700;
}


/* =========================================================
  STYLES
========================================================= */

.styles-grid {
   width:
       min(
           calc(100% - 48px),
           var(--max-width)
       );

   margin: 0 auto;

   display: grid;

   grid-template-columns:
       repeat(
           3,
           minmax(0, 1fr)
       );

   gap: 24px;
}

.style-card {
   min-width: 0;

   overflow: hidden;

   border:
       1px solid
       var(--line);

   border-radius: 18px;

   background:
       var(--surface);

   box-shadow:
       0 12px 38px
       rgba(55, 42, 36, 0.06);

   transition:
       transform 0.25s ease,
       box-shadow 0.25s ease;
}

.style-card:hover {
   transform:
       translateY(-6px);

   box-shadow:
       0 20px 50px
       rgba(55, 42, 36, 0.11);
}

.style-room-image {
   width: 100%;

   aspect-ratio: 4 / 3;

   object-fit: cover;
}

.style-content {
   padding: 20px 18px 22px;

   text-align: center;
}

.style-content h3 {
   margin-bottom: 5px;

   font-family:
       Arial,
       Helvetica,
       sans-serif;

   font-size: 0.85rem;
   font-weight: 700;

   letter-spacing: 0.05em;

   text-transform: uppercase;
}

.style-content p {
   color:
       var(--text-soft);

   font-size: 0.82rem;
}


/* =========================================================
  AI SECTION
========================================================= */

.ai-section {
   padding-top: 45px;
}

.ai-card {
   display: grid;

   grid-template-columns:
       minmax(0, 0.8fr)
       minmax(0, 1.2fr);

   overflow: hidden;

   border-radius: 28px;

   background:
       linear-gradient(
           135deg,
           #f4e8e3,
           #eee1da 50%,
           #e6d8cf
       );

   box-shadow:
       var(--shadow);
}

.ai-copy {
   min-width: 0;

   display: flex;

   flex-direction: column;

   justify-content: center;

   padding: 64px;
}

.ai-copy h2 {
   margin-bottom: 22px;

   font-size:
       clamp(
           2.5rem,
           4.8vw,
           4.5rem
       );
}

.ai-copy p {
   max-width: 620px;

   color:
       var(--text-soft);
}

.ai-badges {
   display: flex;

   flex-wrap: wrap;

   gap: 10px;

   margin-top: 28px;
}

.ai-badges span {
   padding: 8px 13px;

   border:
       1px solid
       rgba(255, 255, 255, 0.75);

   border-radius: 999px;

   background:
       rgba(255, 255, 255, 0.55);

   font-size: 0.72rem;
   font-weight: 700;
}


/* =========================================================
  AI BUILDER PANEL
========================================================= */

.ai-builder {
   min-width: 0;

   padding: 42px;

   background:
       rgba(255, 255, 255, 0.78);

   border-left:
       1px solid
       rgba(255, 255, 255, 0.8);

   backdrop-filter:
       blur(12px);
}

.ai-step {
   padding: 26px 0;

   border-bottom:
       1px solid
       var(--line);
}

.ai-step:first-child {
   padding-top: 0;
}

.ai-step-heading {
   display: flex;

   align-items: flex-start;

   gap: 14px;

   margin-bottom: 20px;
}

.ai-step-heading > span {
   display: grid;

   place-items: center;

   width: 36px;
   height: 36px;

   flex: 0 0 36px;

   border-radius: 50%;

   background:
       var(--accent);

   color: #fff;

   font-family:
       Georgia,
       "Times New Roman",
       serif;

   font-size: 0.86rem;
}

.ai-step-heading strong {
   display: block;

   margin-bottom: 3px;

   font-size: 1rem;
}

.ai-step-heading small {
   display: block;

   color:
       var(--text-soft);

   font-size: 0.78rem;
}


/* =========================================================
  ROOM INPUTS
========================================================= */

.ai-room-grid {
   display: grid;

   grid-template-columns:
       repeat(
           3,
           minmax(0, 1fr)
       );

   gap: 14px;
}

.ai-room-grid label {
   min-width: 0;

   display: block;

   color:
       var(--text-soft);

   font-size: 0.74rem;
   font-weight: 700;

   letter-spacing: 0.03em;

   text-transform: uppercase;
}

.ai-input-wrap {
   display: flex;

   align-items: center;

   margin-top: 7px;

   overflow: hidden;

   border:
       1px solid
       var(--line);

   border-radius: 12px;

   background: #fff;
}

.ai-input-wrap input {
   width: 100%;

   min-width: 0;

   padding: 13px 12px;

   border: none;

   outline: none;

   background:
       transparent;

   color:
       var(--text);

   font-size: 0.9rem;
}

.ai-input-wrap span {
   flex: 0 0 auto;

   padding-right: 12px;

   color:
       var(--text-soft);

   font-size: 0.75rem;
}


/* =========================================================
  PRODUCT SELECT
========================================================= */

.ai-select-products {
   width: 100%;

   min-height: 52px;

   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 16px;

   padding: 0 16px;

   border:
       1px solid
       var(--line);

   border-radius: 12px;

   background: #fff;

   color:
       var(--text);

   cursor: pointer;

   font-size: 0.84rem;
   font-weight: 700;

   text-align: left;

   transition:
       border-color 0.2s ease,
       transform 0.2s ease,
       box-shadow 0.2s ease;
}

.ai-select-products:hover {
   transform:
       translateY(-1px);

   border-color:
       var(--accent);

   box-shadow:
       0 8px 22px
       rgba(55, 42, 36, 0.07);
}

.ai-select-products span {
   flex: 0 0 28px;

   display: grid;

   place-items: center;

   width: 28px;
   height: 28px;

   border-radius: 50%;

   background:
       var(--accent-soft);

   color:
       var(--accent-dark);

   font-size: 1.15rem;
}

.ai-selected-products {
   margin-top: 12px;
}

.ai-empty {
   padding: 14px;

   border-radius: 10px;

   background:
       rgba(255, 255, 255, 0.55);

   color:
       var(--text-soft);

   font-size: 0.78rem;

   text-align: center;
}


/* =========================================================
  AI MODES
========================================================= */

.ai-mode-grid {
   display: grid;

   grid-template-columns:
       repeat(
           2,
           minmax(220px, 280px)
       );

   justify-content: center;

   gap: 18px;

   width: 100%;
}

.ai-mode-card {
   width: 100%;

   min-height: 165px;

   padding: 20px;

   display: flex;

   flex-direction: column;

   align-items: flex-start;

   justify-content: flex-start;

   border:
       1px solid
       var(--line);

   border-radius: 15px;

   background: #fff;

   color:
       var(--text);

   cursor: pointer;

   text-align: left;

   transition:
       transform 0.22s ease,
       border-color 0.22s ease,
       box-shadow 0.22s ease;
}

.ai-mode-card:hover {
   transform:
       translateY(-3px);

   border-color:
       rgba(201, 130, 120, 0.55);

   box-shadow:
       0 12px 30px
       rgba(55, 42, 36, 0.08);
}

.ai-mode-featured {
   border-color:
       rgba(201, 130, 120, 0.55);

   background:
       linear-gradient(
           145deg,
           #fff,
           #fbf0ec
       );
}

.ai-mode-icon {
   display: grid;

   place-items: center;

   width: 36px;
   height: 36px;

   margin-bottom: 15px;

   border-radius: 50%;

   background:
       var(--accent-soft);

   color:
       var(--accent-dark);

   font-size: 1.15rem;
}

.ai-mode-card strong {
   display: block;

   margin-bottom: 7px;

   font-size: 0.86rem;
}

.ai-mode-card small {
   color:
       var(--text-soft);

   font-size: 0.73rem;

   line-height: 1.45;
}


/* =========================================================
  AI FOOTER
========================================================= */

.ai-builder-footer {
   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 20px;

   padding-top: 22px;

   font-size: 0.78rem;
}

#ai-selection-count {
   color:
       var(--text-soft);
}

#ai-selection-total {
   color:
       var(--text);

   font-weight: 700;
}

/* =========================================================
  CUSTOM WALL / COLORS
========================================================= */

.custom-section {
   display: grid;

   grid-template-columns:
       minmax(0, 1fr)
       minmax(0, 0.9fr);

   align-items: center;

   gap: 80px;
}

.custom-copy {
   min-width: 0;
}

.custom-copy h2 {
   max-width: 700px;

   margin-bottom: 24px;

   font-size:
       clamp(
           2.5rem,
           4.8vw,
           4.5rem
       );
}

.custom-copy p {
   max-width: 650px;

   margin-bottom: 18px;

   color:
       var(--text-soft);
}

.custom-copy .button {
   margin-top: 20px;
}

.color-samples {
   display: grid;

   grid-template-columns:
       repeat(
           3,
           minmax(0, 1fr)
       );

   gap: 16px;
}

.sample {
   position: relative;

   aspect-ratio: 1 / 1;

   overflow: hidden;

   border:
       5px solid
       rgba(255, 255, 255, 0.85);

   border-radius: 18px;

   background:
       #f7f3f0;

   box-shadow:
       0 10px 30px
       rgba(55, 42, 36, 0.08),
       inset 0 0 0 1px
       rgba(47, 41, 39, 0.04);

   transition:
       transform 0.25s ease,
       box-shadow 0.25s ease;
}

.sample:hover {
   transform:
       translateY(-4px);

   box-shadow:
       0 16px 38px
       rgba(55, 42, 36, 0.13);
}

.sample img {
   width: 100%;
   height: 100%;

   object-fit: cover;
   object-position: center;

   transition:
       transform 0.35s ease;
}

.sample:hover img {
   transform:
       scale(1.04);
}


/* =========================================================
  BRAND SECTION
========================================================= */

.brand-section {
   padding-top: 65px;
   padding-bottom: 65px;

   text-align: center;
}

.brand-section span {
   font-size: 2.5rem;
}

.brand-section small {
   display: inline-block;

   margin: 0 15px;

   color:
       var(--accent);

   font-size: 1.4rem;
}

.brand-section strong {
   font-family:
       Arial,
       Helvetica,
       sans-serif;

   font-size: 2.2rem;

   letter-spacing: -0.04em;
}

.brand-section p {
   max-width: 640px;

   margin: 20px auto 0;

   color:
       var(--text-soft);
}


/* =========================================================
  FINAL CTA
========================================================= */

.final-cta {
   position: relative;

   min-height: 560px;

   display: grid;

   place-items: center;

   padding: 70px 24px;

   overflow: hidden;

   background:
       linear-gradient(
           rgba(248, 244, 241, 0.22),
           rgba(248, 244, 241, 0.22)
       ),
       url("../images/rooms/szoba-kesz.jpg")
       center /
       cover
       no-repeat;
}

.final-overlay {
   position: absolute;

   inset: 0;

   background:
       linear-gradient(
           90deg,
           rgba(249, 245, 242, 0.96),
           rgba(249, 245, 242, 0.73),
           rgba(249, 245, 242, 0.30)
       );
}

.final-content {
   position: relative;

   z-index: 2;

   width:
       min(
           100%,
           900px
       );

   text-align: center;
}

.final-content h2 {
   margin-bottom: 20px;

   font-size:
       clamp(
           2.7rem,
           5vw,
           5rem
       );
}

.final-content p {
   max-width: 600px;

   margin:
       0 auto 30px;

   color:
       #5f5550;
}


/* =========================================================
  FOOTER
========================================================= */

.landing-footer {
   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 30px;

   padding:
       34px 5vw;

   background:
       #2e2927;

   color:
       rgba(255, 255, 255, 0.86);
}

.landing-footer div {
   display: flex;

   align-items: center;

   gap: 8px;
}

.landing-footer strong {
   font-family:
       Georgia,
       "Times New Roman",
       serif;

   font-size: 1.1rem;
}

.landing-footer span,
.landing-footer p {
   color:
       rgba(255, 255, 255, 0.58);

   font-size: 0.78rem;
}


/* =========================================================
  AI PRODUCT MODAL
========================================================= */

body.ai-modal-open {
   overflow: hidden;
}

.ai-product-modal {
   position: fixed;

   inset: 0;

   z-index: 99999;

   display: flex;

   align-items: center;

   justify-content: center;

   padding: 24px;
}

.ai-modal-backdrop {
   position: absolute;

   inset: 0;

   background:
       rgba(35, 29, 27, 0.55);

   backdrop-filter:
       blur(6px);
}

.ai-modal-dialog {
   position: relative;

   z-index: 2;

   width:
       min(
           1100px,
           100%
       );

   max-height: 88vh;

   display: flex;

   flex-direction: column;

   overflow: hidden;

   border-radius: 24px;

   background: #fff;

   box-shadow:
       0 30px 90px
       rgba(35, 29, 27, 0.28);
}

.ai-modal-header {
   display: flex;

   align-items: flex-start;

   justify-content: space-between;

   gap: 20px;

   padding:
       28px 30px 20px;

   border-bottom:
       1px solid
       var(--line);
}

.ai-modal-header h3 {
   margin: 0;

   font-size: 2rem;
}

.ai-modal-close {
   width: 42px;
   height: 42px;

   display: grid;

   place-items: center;

   flex: 0 0 42px;

   border: none;

   border-radius: 50%;

   background:
       var(--bg-soft);

   color:
       var(--text);

   cursor: pointer;

   font-size: 1.6rem;

   line-height: 1;
}

.ai-modal-search {
   padding:
       18px 30px;

   border-bottom:
       1px solid
       var(--line);
}

.ai-modal-search input {
   width: 100%;

   min-height: 48px;

   padding:
       0 15px;

   border:
       1px solid
       var(--line);

   border-radius: 12px;

   outline: none;

   background:
       #faf8f6;
}

.ai-modal-search input:focus {
   border-color:
       var(--accent);
}

.ai-product-grid {
   display: grid;

   grid-template-columns:
       repeat(
           4,
           minmax(0, 1fr)
       );

   gap: 16px;

   padding:
       24px 30px 30px;

   overflow-y: auto;
}

.ai-product-card {
   position: relative;

   min-width: 0;
   min-height: 300px;

   display: flex;

   flex-direction: column;

   overflow: hidden;

   border:
       1px solid
       var(--line);

   border-radius: 16px;

   background: #fff;

   cursor: pointer;

   transition:
       transform 0.2s ease,
       border-color 0.2s ease,
       box-shadow 0.2s ease;
}

.ai-product-card:hover {
   transform:
       translateY(-3px);

   box-shadow:
       0 12px 28px
       rgba(55, 42, 36, 0.08);
}

.ai-product-card.selected {
   border-color:
       var(--accent);

   box-shadow:
       0 0 0 2px
       rgba(201, 130, 120, 0.16);
}

.ai-product-card > input {
   position: absolute;

   opacity: 0;

   pointer-events: none;
}

.ai-product-image {
   height: 180px;

   display: flex;

   align-items: center;

   justify-content: center;

   padding: 14px;

   background:
       #faf8f6;
}

.ai-product-image img {
   width: 100%;
   height: 100%;

   object-fit: contain;
}

.ai-product-image span {
   color:
       var(--text-soft);

   font-size: 0.75rem;
}

.ai-product-info {
   flex: 1;

   padding:
       14px 15px 16px;
}

.ai-product-info strong {
   display: block;

   margin-bottom: 6px;

   font-size: 0.83rem;

   line-height: 1.35;
}

.ai-product-info span {
   color:
       var(--accent-dark);

   font-size: 0.78rem;
   font-weight: 700;
}

.ai-product-check {
   position: absolute;

   top: 10px;
   right: 10px;

   width: 28px;
   height: 28px;

   display: grid;

   place-items: center;

   border-radius: 50%;

   background:
       rgba(255, 255, 255, 0.92);

   color:
       transparent;

   box-shadow:
       0 3px 12px
       rgba(35, 29, 27, 0.12);
}

.ai-product-card.selected
.ai-product-check {
   background:
       var(--accent);

   color: #fff;
}

.ai-modal-footer {
   display: flex;

   align-items: center;

   justify-content: space-between;

   gap: 24px;

   padding:
       18px 30px;

   border-top:
       1px solid
       var(--line);

   background: #fff;
}

.ai-modal-summary {
   display: flex;

   flex-direction: column;

   gap: 3px;
}

.ai-modal-summary span {
   color:
       var(--text-soft);

   font-size: 0.76rem;
}

.ai-modal-summary strong {
   font-size: 1rem;
}

.ai-no-products {
   grid-column:
       1 / -1;

   padding:
       50px 20px;

   color:
       var(--text-soft);

   text-align: center;
}


/* =========================================================
  SELECTED PRODUCTS
========================================================= */

.ai-selected-item {
   display: grid;

   grid-template-columns:
       52px
       minmax(0, 1fr)
       auto;

   align-items: center;

   gap: 12px;

   margin-top: 10px;

   padding: 10px;

   border:
       1px solid
       var(--line);

   border-radius: 12px;

   background:
       rgba(255, 255, 255, 0.72);
}

.ai-selected-thumb {
   width: 52px;
   height: 52px;

   display: flex;

   align-items: center;

   justify-content: center;

   overflow: hidden;

   border-radius: 9px;

   background: #fff;
}

.ai-selected-thumb img {
   width: 100%;
   height: 100%;

   object-fit: contain;
}

.ai-selected-info {
   min-width: 0;
}

.ai-selected-info strong {
   display: block;

   margin-bottom: 3px;

   overflow-wrap: anywhere;

   font-size: 0.8rem;
}

.ai-selected-info span {
   color:
       var(--accent-dark);

   font-size: 0.74rem;
   font-weight: 700;
}

.ai-remove-product {
   width: 30px;
   height: 30px;

   border: none;

   border-radius: 50%;

   background:
       var(--bg-soft);

   color:
       var(--text);

   cursor: pointer;

   font-size: 1rem;
}


/* =========================================================
  AI 3D RESULT
========================================================= */

.ai-image-results {
   width:
       min(
           calc(100% - 48px),
           var(--max-width)
       );

   margin: 0 auto;

   padding: 90px 0;

   display: grid;

   grid-template-columns:
       minmax(0, 1000px);

   justify-content: center;
}

.ai-image-result-card {
   width: 100%;

   overflow: hidden;

   border:
       1px solid
       var(--line);

   border-radius: 22px;

   background: #fff;

   box-shadow:
       0 18px 50px
       rgba(55, 42, 36, 0.08);
}

.ai-image-result-copy {
   padding:
       26px 28px 22px;

   text-align: center;
}

.ai-image-result-copy h3 {
   margin-bottom: 8px;

   font-size: 1.6rem;
}

.ai-image-result-copy p {
   max-width: 720px;

   margin: 0 auto;

   color:
       var(--text-soft);

   font-size: 0.88rem;
}

.ai-generated-image {
   width: 100%;

   aspect-ratio: 3 / 2;

   overflow: hidden;

   background:
       #f4efeb;
}

.ai-generated-image img {
   width: 100%;
   height: 100%;

   object-fit: cover;
}

.ai-image-result-card .button {
   width:
       calc(
           100% - 56px
       );

   margin:
       22px 28px 28px;
}

/* =========================================================
  FINAL FIX – SELECTED PRODUCT ROWS
========================================================= */

.ai-selected-item {
   display: flex !important;
   align-items: center !important;

   width: 100% !important;

   gap: 14px !important;

   padding: 12px 14px !important;
}

.ai-selected-thumb {
   flex: 0 0 58px !important;

   width: 58px !important;
   height: 58px !important;
}

.ai-selected-info {
   flex: 1 1 auto !important;

   width: auto !important;
   min-width: 0 !important;

   display: flex !important;
   flex-direction: column !important;

   align-items: flex-start !important;
}

.ai-selected-info strong {
   display: block !important;

   width: 100% !important;

   margin-bottom: 4px !important;

   white-space: normal !important;
   word-break: normal !important;
   overflow-wrap: anywhere !important;

   color: var(--text) !important;

   font-size: 0.82rem !important;
   line-height: 1.4 !important;
}

.ai-selected-info span {
   display: block !important;

   color: var(--accent-dark) !important;

   font-size: 0.76rem !important;
   font-weight: 700 !important;
}

.ai-remove-product {
   flex: 0 0 32px !important;

   width: 32px !important;
   height: 32px !important;

   margin-left: auto !important;
}


/* =========================================================
  TABLET
========================================================= */

@media (max-width: 1050px) {

   .landing-header {
       grid-template-columns:
           minmax(0, 1fr)
           auto;

       gap: 20px;
   }

   .landing-nav {
       display: none;
   }

   .hero {
       min-height: 620px;

       background:
           linear-gradient(
               90deg,
               rgba(249, 245, 242, 0.97) 0%,
               rgba(249, 245, 242, 0.84) 52%,
               rgba(249, 245, 242, 0.35) 100%
           ),
           url("../images/walls/oliva-harmonia.png")
           center right /
           cover
           no-repeat;
   }

   .flow-grid {
       grid-template-columns:
           minmax(0, 1fr);
   }

   .flow-arrow {
       margin: 0 auto;

       transform:
           rotate(90deg);
   }

   .steps-grid {
       grid-template-columns:
           repeat(
               2,
               minmax(0, 1fr)
           );
   }

   .step-card {
       border-right:
           1px solid
           var(--line);
   }

   .step-card:nth-child(2n) {
       border-right: none;
   }

   .step-card:nth-child(-n + 2) {
       border-bottom:
           1px solid
           var(--line);
   }

   .designer-showcase,
   .custom-section {
       grid-template-columns:
           minmax(0, 1fr);
   }

   .designer-showcase {
       gap: 45px;
   }

   .styles-grid {
       grid-template-columns:
           repeat(
               2,
               minmax(0, 1fr)
           );
   }

   .ai-card {
       grid-template-columns:
           minmax(0, 1fr);
   }

   .ai-copy {
       padding:
           48px 42px;
   }

   .ai-builder {
       border-left: none;

       border-top:
           1px solid
           rgba(255, 255, 255, 0.8);
   }

   .ai-mode-grid {
       grid-template-columns:
           repeat(
               2,
               minmax(220px, 300px)
           );

       justify-content: center;
   }

   .custom-section {
       gap: 50px;
   }

}


/* =========================================================
  MODAL TABLET
========================================================= */

@media (max-width: 900px) {

   .ai-product-grid {
       grid-template-columns:
           repeat(
               3,
               minmax(0, 1fr)
           );
   }

}


/* =========================================================
  MOBILE
========================================================= */

@media (max-width: 700px) {

   .section {
       width:
           min(
               calc(100% - 28px),
               var(--max-width)
           );

       padding:
           75px 0;
   }

   .landing-header {
       min-height: 68px;

       padding:
           0 16px;

       gap: 12px;
   }

   .brand-main {
       font-size: 1.45rem;
   }

   .brand-sub {
       margin-top: 5px;

       font-size: 0.48rem;

       letter-spacing: 0.28em;
   }

   .header-cta {
       min-height: 39px;

       padding:
           0 13px;

       font-size: 0.63rem;
   }

   .hero {
       min-height: 720px;

       align-items: flex-end;

       padding-bottom: 60px;

       background:
           linear-gradient(
               to top,
               rgba(249, 245, 242, 1) 0%,
               rgba(249, 245, 242, 0.94) 35%,
               rgba(249, 245, 242, 0.50) 70%,
               rgba(249, 245, 242, 0.07) 100%
           ),
           url("../images/walls/oliva-harmonia.png")
           65% center /
           cover
           no-repeat;
   }

   .hero-content {
       width:
           calc(100% - 30px);
   }

   .hero h1 {
       font-size: 2.7rem;
   }

   .hero p {
       font-size: 0.95rem;
   }

   .hero-actions {
       flex-direction: column;

       align-items: stretch;
   }

   .button {
       width: 100%;

       padding-left: 17px;
       padding-right: 17px;

       font-size: 0.72rem;
   }

   .section-heading {
       margin-bottom: 38px;
   }

   .section-heading h2 {
       font-size: 2.55rem;
   }

   .flow-image {
       height: auto;

       min-height: 240px;

       aspect-ratio: 4 / 3;
   }

   .steps-grid {
       grid-template-columns:
           minmax(0, 1fr);
   }

   .step-card {
       min-height: unset;

       border-right: none !important;
   }

   .step-card:not(:last-child) {
       border-bottom:
           1px solid
           var(--line);
   }

   .designer-showcase {
       gap: 36px;
   }

   .preview-content {
       grid-template-columns:
           74px
           minmax(0, 1fr);

       min-height: 320px;
   }

   .preview-sidebar {
       width: 74px;

       padding: 9px;

       gap: 9px;
   }

   .preview-room {
       min-height: 320px;
   }

   .designer-copy h2,
   .custom-copy h2 {
       font-size: 2.55rem;
   }

   .feature-grid {
       grid-template-columns:
           minmax(0, 1fr);
   }

   .styles-grid {
       width:
           min(
               calc(100% - 28px),
               var(--max-width)
           );

       grid-template-columns:
           minmax(0, 1fr);
   }

   .ai-copy {
       padding:
           38px 26px;
   }

   .ai-copy h2 {
       font-size: 2.55rem;
   }

   .ai-builder {
       padding:
           30px 20px;
   }

   .ai-room-grid {
       grid-template-columns:
           minmax(0, 1fr);
   }

   .ai-mode-grid {
       grid-template-columns:
           minmax(0, 1fr);

       max-width: 420px;

       margin:
           0 auto;

       gap: 14px;
   }

   .ai-mode-card {
       min-height: 145px;
   }

   .ai-builder-footer {
       flex-direction: column;

       align-items: flex-start;

       gap: 6px;
   }

   .color-samples {
       grid-template-columns:
           repeat(
               3,
               minmax(0, 1fr)
           );
   }

   .brand-section span,
   .brand-section strong {
       display: block;
   }

   .brand-section small {
       margin:
           8px 0;
   }

   .final-cta {
       min-height: 600px;

       background:
           linear-gradient(
               to top,
               rgba(249, 245, 242, 0.98),
               rgba(249, 245, 242, 0.76),
               rgba(249, 245, 242, 0.20)
           ),
           url("../images/rooms/szoba-kesz.jpg")
           center /
           cover
           no-repeat;
   }

   .final-overlay {
       background: transparent;
   }

   .final-content {
       align-self: end;
   }

   .landing-footer {
       flex-direction: column;

       align-items: flex-start;

       gap: 12px;
   }


   /* =====================================================
      MOBILE MODAL
   ===================================================== */

   .ai-product-modal {
       padding: 10px;
   }

   .ai-modal-dialog {
       max-height: 94vh;

       border-radius: 18px;
   }

   .ai-modal-header {
       padding:
           20px 18px 16px;
   }

   .ai-modal-header h3 {
       font-size: 1.55rem;
   }

   .ai-modal-search {
       padding:
           14px 18px;
   }

   .ai-product-grid {
       grid-template-columns:
           repeat(
               2,
               minmax(0, 1fr)
           );

       gap: 10px;

       padding:
           16px 18px 20px;
   }

   .ai-product-card {
       min-height: 255px;
   }

   .ai-product-image {
       height: 135px;
   }

   .ai-product-info {
       padding:
           12px 12px 14px;
   }

   .ai-modal-footer {
       padding:
           14px 18px;

       flex-direction: column;

       align-items: stretch;

       gap: 12px;
   }

   .ai-modal-footer .button {
       width: 100%;
   }


   /* =====================================================
      MOBILE AI 3D RESULT
   ===================================================== */

   .ai-image-results {
       width:
           min(
               calc(100% - 28px),
               var(--max-width)
           );

       padding:
           60px 0;
   }

   .ai-image-result-copy {
       padding:
           22px 18px 18px;
   }

   .ai-image-result-copy h3 {
       font-size: 1.35rem;
   }

   .ai-generated-image {
       aspect-ratio: 4 / 3;
   }

   .ai-image-result-card .button {
       width:
           calc(100% - 36px);

       margin:
           18px 18px 20px;
   }

}


/* =========================================================
  SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

   .landing-header {
       grid-template-columns:
           minmax(0, 1fr)
           auto;
   }

   .header-cta {
       padding:
           0 10px;

       font-size: 0.56rem;
   }

   .hero h1 {
       font-size: 2.35rem;
   }

   .section-heading h2,
   .designer-copy h2,
   .custom-copy h2 {
       font-size: 2.25rem;
   }

   .preview-content {
       grid-template-columns:
           62px
           minmax(0, 1fr);
   }

   .preview-sidebar {
       width: 62px;

       padding: 7px;

       gap: 7px;
   }

   .color-samples {
       grid-template-columns:
           repeat(
               2,
               minmax(0, 1fr)
           );
   }

   .ai-copy {
       padding:
           32px 20px;
   }

   .ai-builder {
       padding:
           26px 16px;
   }

   .ai-step-heading {
       gap: 11px;
   }

   .ai-mode-card {
       min-height: 135px;

       padding: 17px;
   }

   .ai-product-grid {
       grid-template-columns:
           minmax(0, 1fr);
   }

   .ai-product-card {
       min-height: 280px;
   }

   .ai-product-image {
       height: 185px;
   }

   .ai-selected-item {
       grid-template-columns:
           46px
           minmax(0, 1fr)
           auto;

       gap: 9px;
   }

   .ai-selected-thumb {
       width: 46px;
       height: 46px;
   }

}


/* =========================================================
  VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

   .landing-header {
       padding:
           0 12px;
   }

   .brand-main {
       font-size: 1.3rem;
   }

   .brand-sub {
       font-size: 0.43rem;
   }

   .header-cta {
       padding:
           0 8px;

       font-size: 0.52rem;
   }

   .hero h1 {
       font-size: 2.1rem;
   }

   .section-heading h2,
   .designer-copy h2,
   .custom-copy h2,
   .ai-copy h2 {
       font-size: 2rem;
   }

   .ai-modal-header h3 {
       font-size: 1.35rem;
   }

}