:root {
    --coral:#ef6f61;
    --coral-bright:#ff7c6b;
    --sunset:#f6a56f;
    --blush:#f5c1b8;
    --cream:#fff5ea;
    --paper:#fffaf5;
    --ink:#241d1a;
    --brown:#5c4037;
    --muted:#79675f;
    --line:rgba(54,34,27,.16);
    --wine:#6c2f3b;
    --max:1280px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans Thai","Tahoma",sans-serif; line-height:1.75; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font:inherit; }
.container { width:min(calc(100% - 40px),var(--max)); margin:0 auto; }
.topbar { padding:8px 20px; color:#fff7f1; background:var(--wine); font-size:12px; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.site-header { position:sticky; top:0; z-index:100; border-bottom:1px solid rgba(82,44,35,.12); background:rgba(255,250,245,.92); backdrop-filter:blur(18px); }
.header-inner { min-height:82px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:34px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:38px; height:38px; display:grid; place-items:center; color:#fff; border-radius:50%; background:linear-gradient(145deg,var(--coral),var(--wine)); font-family:Georgia,serif; font-size:13px; letter-spacing:.06em; }
.brand-name,.footer-logo { font-family:Georgia,"Times New Roman",serif; font-size:27px; font-style:italic; letter-spacing:.01em; }
.main-navigation { justify-self:center; }
.main-menu,.sub-menu { margin:0; padding:0; list-style:none; }
.main-menu { display:flex; align-items:center; gap:24px; font-size:13px; letter-spacing:.03em; }
.main-menu > li { position:relative; }
.main-menu a { display:block; padding:12px 0; }
.main-menu a:hover,.main-menu .is-active > a { color:var(--coral); }
.sub-menu { position:absolute; top:100%; left:-18px; display:none; min-width:220px; padding:14px 18px; border:1px solid var(--line); background:rgba(255,250,245,.98); box-shadow:0 25px 60px rgba(55,29,24,.12); }
.has-children:hover > .sub-menu { display:block; }
.header-cta { padding:11px 19px; color:#fff; border-radius:999px; background:var(--ink); font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.menu-toggle { display:none; width:44px; height:44px; padding:0; border:0; background:transparent; }
.menu-toggle span { display:block; width:24px; height:1px; margin:7px auto; background:var(--ink); }
.hero { min-height:760px; position:relative; overflow:hidden; padding:70px 0 90px; background:linear-gradient(128deg,#fff7ed 0%,#ffd1bd 48%,#ef735f 100%); }
.hero:before { content:""; position:absolute; inset:0; opacity:.34; background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px); background-size:90px 90px; }
.hero-orb { position:absolute; border-radius:50%; filter:blur(2px); }
.hero-orb-one { width:420px; height:420px; right:-100px; top:-120px; background:rgba(255,229,191,.46); }
.hero-orb-two { width:260px; height:260px; left:-90px; bottom:-80px; background:rgba(117,42,57,.18); }
.hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; gap:60px; }
.eyebrow { margin:0 0 18px; color:var(--wine); font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia,"Times New Roman","Noto Serif Thai",serif; font-weight:400; line-height:.98; }
h1 { margin-bottom:28px; font-size:clamp(66px,8vw,118px); letter-spacing:-.055em; }
h2 { margin-bottom:26px; font-size:clamp(48px,6vw,84px); letter-spacing:-.045em; }
h1 em,h2 em,.manifesto-copy em { color:var(--wine); font-weight:400; }
h3 { margin-bottom:12px; font-size:24px; line-height:1.35; }
.lead { max-width:600px; margin-bottom:30px; color:#4d3a34; font-size:18px; }
.actions { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; }
.actions-left { justify-content:flex-start; }
.button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; padding:0 26px; border-radius:999px; font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.button-dark { color:#fff; background:var(--ink); }
.button-light { color:var(--wine); background:#fff6ec; }
.text-link { display:inline-flex; align-items:center; gap:10px; padding-bottom:5px; border-bottom:1px solid currentColor; font-size:13px; font-weight:800; letter-spacing:.03em; }
.light-link { color:#fff6ec; }
.hero-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:58px; color:#5f4038; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.hero-meta span:not(:last-child):after { content:"·"; margin-left:18px; }
.hero-visual { min-height:610px; position:relative; }
.image-slot { margin:0; position:relative; overflow:hidden; background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(109,47,59,.12)); }
.image-slot img { width:100%; height:100%; object-fit:cover; }

.image-slot > img { width:100%; height:100%; display:block; object-fit:cover; }
.image-slot > .image-placeholder { display:none; }

.image-placeholder { width:100%; height:100%; min-height:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; border:1px dashed rgba(81,44,35,.42); color:#68483f; text-align:center; }
.image-placeholder strong { margin-bottom:10px; font-family:Georgia,serif; font-size:28px; font-style:italic; }
.image-placeholder span { font-size:12px; font-weight:800; letter-spacing:.05em; }
.image-placeholder small { max-width:340px; margin-top:8px; font-size:11px; opacity:.76; }
.image-slot-hero { width:78%; min-height:610px; margin-left:auto; border-radius:240px 240px 18px 18px; box-shadow:0 40px 100px rgba(91,40,45,.26); }
.floating-note { position:absolute; left:2%; bottom:90px; width:145px; height:145px; display:grid; place-items:center; padding:20px; border-radius:50%; color:#fff; background:var(--wine); font-family:Georgia,serif; font-size:19px; font-style:italic; line-height:1.05; text-align:center; transform:rotate(-10deg); }
.vertical-caption { position:absolute; right:-12px; top:50%; color:#6b3f37; font-size:10px; font-weight:800; letter-spacing:.22em; writing-mode:vertical-rl; transform:translateY(-50%); }
.marquee { overflow:hidden; padding:18px 0; color:#fff5eb; background:var(--ink); }
.marquee-track { width:max-content; display:flex; align-items:center; gap:28px; animation:marquee 26s linear infinite; font-family:Georgia,serif; font-size:18px; font-style:italic; letter-spacing:.08em; }
.marquee-track i { color:var(--coral); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-35%)} }
.story-section,.services-section,.occasions-section,.journal-section,.why-section,.faq-section,.contact-section { padding:120px 0; }
.story-section { background:#fffaf5; }
.story-grid { display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:90px; }
.story-visual { position:relative; width:100%; min-width:0; height:clamp(620px,58vw,760px); padding:0 48px 42px 0; }
.story-main { width:100%; height:100%; min-height:0; margin:0; overflow:hidden; border-radius:999px 999px 10px 10px; background:#f5e6df; }
.story-main > img { display:block; width:100%; max-width:none; height:100%; object-fit:cover; object-position:50% 34%; }
.story-main > .image-placeholder { display:none; }
.story-detail { position:absolute; right:0; bottom:0; z-index:2; width:clamp(170px,18vw,240px); min-height:0; aspect-ratio:1 / 1; margin:0; overflow:hidden; border:10px solid var(--paper); border-radius:50%; background:#f5e6df; box-shadow:0 22px 55px rgba(93,43,45,.18); }
.story-detail > img { display:block; width:100%; max-width:none; height:100%; object-fit:cover; object-position:center center; }
.story-detail > .image-placeholder { display:none; }
.story-copy .intro { font-size:19px; }
.story-copy p { color:var(--muted); }
blockquote { margin:34px 0; padding:24px 0 24px 28px; border-left:2px solid var(--coral); color:var(--wine); font-family:Georgia,"Times New Roman",serif; font-size:24px; font-style:italic; line-height:1.4; }
.services-section { color:#fff7ef; background:var(--ink); }
.services-section .eyebrow,.services-section h2 em { color:var(--coral-bright); }
.split-heading { display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:70px; margin-bottom:64px; }
.split-heading > p { max-width:530px; color:#cdbdb5; }
.services-list { border-top:1px solid rgba(255,255,255,.18); }
.service-row { display:grid; grid-template-columns:60px 160px 1fr 40px; align-items:center; gap:28px; padding:24px 0; border-bottom:1px solid rgba(255,255,255,.18); transition:.25s; }
.service-row:hover { padding-left:14px; background:rgba(255,255,255,.035); }
.service-number { color:var(--coral); font-family:Georgia,serif; font-size:18px; font-style:italic; }
.service-thumb { min-height:112px; border-radius:80px; }
.service-thumb 
.image-slot > img { width:100%; height:100%; display:block; object-fit:cover; }
.image-slot > .image-placeholder { display:none; }

.image-placeholder { padding:12px; color:#e8bbb1; border-color:rgba(255,255,255,.28); }
.service-thumb .image-placeholder span { font-size:9px; }
.service-content small { color:var(--coral); font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.service-content h3 { margin:4px 0 5px; font-family:Georgia,serif; font-size:30px; font-weight:400; }
.service-content p { max-width:720px; margin-bottom:0; color:#cdbdb5; }
.service-arrow { color:var(--coral); font-size:24px; }
.occasions-section { background:linear-gradient(180deg,#fff5e8,#f7c7b7); }
.centered-heading { max-width:790px; margin:0 auto 60px; text-align:center; }
.centered-heading p:last-child { color:var(--muted); }
.occasion-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:420px; gap:18px; }
.occasion-card { position:relative; overflow:hidden; border-radius:6px; }
.occasion-card-wide { grid-column:span 2; }
.occasion-image { width:100%; height:100%; }
.occasion-image 
.image-slot > img { width:100%; height:100%; display:block; object-fit:cover; }
.image-slot > .image-placeholder { display:none; }

.image-placeholder { color:#6f463e; }
.occasion-overlay { position:absolute; inset:auto 0 0; padding:70px 26px 25px; color:#fff; background:linear-gradient(transparent,rgba(38,24,21,.86)); }
.occasion-overlay small { font-size:10px; letter-spacing:.15em; text-transform:uppercase; }
.occasion-overlay h3 { margin:4px 0 6px; font-family:Georgia,serif; font-size:29px; font-weight:400; }
.occasion-overlay p { max-width:540px; margin:0; color:#eee1db; font-size:13px; }
.manifesto-section { padding:72px 0; color:#fff; background:var(--coral); }
.manifesto-grid { display:grid; grid-template-columns:.55fr 1.3fr .65fr; align-items:center; gap:45px; }
.manifesto-kicker,.manifesto-detail { font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.manifesto-copy { font-family:Georgia,serif; font-size:clamp(36px,4vw,64px); line-height:1.08; }
.manifesto-copy em { color:var(--wine); }
.journal-section { background:#fffaf5; }
.journal-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.journal-card { border-bottom:1px solid var(--line); }
.journal-image {
    /* min-height: 310px; */
}
.journal-body { padding:24px 0 30px; }
.journal-body small { color:var(--coral); font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.journal-body h3 { margin-top:8px; font-family:Georgia,serif; font-size:30px; font-weight:400; }
.journal-body p { color:var(--muted); }
.why-section { color:#fff4eb; background:var(--wine); }
.why-section .eyebrow,.why-section h2 em { color:var(--sunset); }
.why-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }
.why-copy p:last-child { color:#dcc9c3; }
.why-points { display:grid; grid-template-columns:1fr 1fr; }
.why-points > div { min-height:220px; padding:30px; border:1px solid rgba(255,255,255,.16); }
.why-points span { color:var(--sunset); font-family:Georgia,serif; font-size:16px; font-style:italic; }
.why-points h3 { margin-top:34px; font-family:Georgia,serif; font-size:28px; font-weight:400; }
.why-points p { color:#dcc9c3; font-size:14px; }
.faq-section { background:#f4c1b2; }
.faq-grid { display:grid; grid-template-columns:.7fr 1.3fr; gap:90px; }
.faq-list details { border-top:1px solid rgba(73,39,34,.26); }
.faq-list details:last-child { border-bottom:1px solid rgba(73,39,34,.26); }
.faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; cursor:pointer; list-style:none; font-size:16px; font-weight:800; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary span { font-family:Georgia,serif; font-size:26px; font-weight:400; }
.faq-list details p { max-width:760px; padding:0 46px 22px 0; color:#664c45; }
.contact-section { background:#fffaf5; }
.contact-card { min-height:620px; display:grid; grid-template-columns:1.05fr .95fr; overflow:hidden; color:#fff6ed; background:var(--wine); }
.contact-copy { padding:80px; align-self:center; }
.contact-copy .eyebrow,.contact-copy h2 em { color:var(--sunset); }
.contact-copy p { max-width:600px; color:#dcc8c0; }
.contact-image { height:100%; min-height:620px; }
.contact-image 
.image-slot > img { width:100%; height:100%; display:block; object-fit:cover; }
.image-slot > .image-placeholder { display:none; }

.image-placeholder { color:#f4c6ba; border-color:rgba(255,255,255,.25); }
.site-footer { padding:72px 0 28px; color:#cdbeb6; background:var(--ink); }
.footer-grid { display:grid; grid-template-columns:1.5fr .7fr .8fr; gap:70px; }
.footer-brand p { max-width:500px; }
.site-footer h4 { margin:0 0 18px; color:#fff; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
.site-footer a,.site-footer span { display:block; margin:8px 0; }
.footer-logo { margin-bottom:18px; color:#fff; font-size:36px; }
.footer-bottom { display:flex; justify-content:space-between; gap:30px; margin-top:55px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:1050px) {
    .header-inner { grid-template-columns:auto auto auto; }
    .menu-toggle { display:block; justify-self:end; }
    .main-navigation { position:absolute; left:20px; right:20px; top:82px; display:none; padding:22px; border:1px solid var(--line); background:#fffaf5; box-shadow:0 22px 60px rgba(48,28,22,.16); }
    .main-navigation.is-open { display:block; }
    .main-menu { flex-direction:column; align-items:flex-start; gap:2px; }
    .sub-menu { position:static; display:block; padding:0 0 0 16px; border:0; box-shadow:none; background:transparent; }
    .header-cta { justify-self:end; }
    .hero-grid,.story-grid,.why-grid,.faq-grid,.contact-card { grid-template-columns:1fr; }
    .hero-visual { max-width:760px; margin:0 auto; width:100%; }
    .story-grid,.why-grid,.faq-grid { gap:55px; }
    .story-visual { width:min(100%,680px); height:clamp(620px,92vw,780px); margin:0 auto; padding:0 42px 40px 0; }
    .story-main > img { object-position:50% 31%; }
    .story-detail { width:clamp(165px,24vw,220px); }
    .split-heading { grid-template-columns:1fr; gap:12px; }
    .occasion-grid { grid-template-columns:1fr 1fr; }
    .occasion-card-wide { grid-column:span 1; }
    .journal-grid { grid-template-columns:1fr 1fr; }
    .manifesto-grid { grid-template-columns:1fr; }
    .contact-image { min-height:480px; }
}
@media (max-width:700px) {
    .container { width:min(calc(100% - 28px),var(--max)); }
    .topbar { font-size:9px; }
    .header-inner { min-height:72px; gap:12px; }
    .brand-name { font-size:22px; }
    .brand-mark { width:34px; height:34px; }
    .header-cta { display:none; }
    .hero { min-height:auto; padding:58px 0 70px; }
    .hero-grid { gap:46px; }
    h1 { font-size:58px; }
    h2 { font-size:48px; }
    .image-slot-hero { width:90%; min-height:460px; }
    .floating-note { width:110px; height:110px; bottom:55px; font-size:16px; }
    .hero-meta { gap:8px 14px; }
    .hero-meta span:after { display:none; }
    .story-section,.services-section,.occasions-section,.journal-section,.why-section,.faq-section,.contact-section { padding:82px 0; }
    .story-visual { width:100%; height:620px; margin:0 auto; padding:0 18px 32px 0; }
    .story-main { height:100%; min-height:0; border-radius:220px 220px 10px 10px; }
    .story-main > img { object-position:50% 29%; }
    .story-detail { right:0; bottom:0; width:150px; min-height:0; border-width:7px; }
    .service-row { grid-template-columns:42px 92px 1fr; gap:14px; }
    .service-arrow { display:none; }
    .service-content h3 { font-size:23px; }
    .service-content p { font-size:13px; }
    .occasion-grid,.journal-grid,.why-points,.footer-grid { grid-template-columns:1fr; }
    .occasion-grid { grid-auto-rows:390px; }
    .contact-copy { padding:48px 28px; }
    .footer-bottom { flex-direction:column; }
}


@media (max-width:480px) {
    .story-visual { height:560px; padding-right:12px; padding-bottom:26px; }
    .story-main { border-radius:190px 190px 9px 9px; }
    .story-main > img { object-position:50% 27%; }
    .story-detail { width:132px; border-width:6px; }
}

.floating-note-image {
    position: absolute;
    left: 2%;
    bottom: 90px;
    z-index: 3;
    width: 240px;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    border: none;
    border-radius: 50%;
    background: none;
    box-shadow: none;
}

.floating-note-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
	transform:rotate(-10deg); 
}

@media (max-width:700px) {
    .floating-note-image {
        width: 110px;
        bottom: 55px;
        border-width: 6px;
    }
}
/* =========================================================
   HOLY PEONY — CORAL × GOLD FASHION ACCENTS
   ใช้สีทองให้เห็นชัดขึ้น โดยยังคงความโมเดิร์นและแฟชั่น
========================================================= */

:root {
    --gold:#d6a126;
    --gold-bright:#f4d46a;
    --gold-light:#f8e8ad;
    --gold-deep:#9c6712;
    --gold-line:rgba(214,161,38,.42);
    --gold-shadow:rgba(156,103,18,.22);
}

/* Header & Brand */
.site-header {
    border-bottom:1px solid var(--gold-line);
}

.brand-mark {
    background: #ef6f61;
    box-shadow: none;
    filter: drop-shadow(0 8px 14px rgb(193 161 58 / 62%));
}

.brand-mark img {
    width:100%;
    height:100%;
    object-fit:contain;
}

.brand-name {
    color:var(--wine);
}

.main-menu a:hover,
.main-menu .is-active > a {
    color:var(--gold-deep);
}

.main-menu .is-active > a {
    border-bottom:1px solid var(--gold);
}

/* Eyebrow & Text accents */
.eyebrow {
    color:var(--gold-deep);
}

.text-link {
    border-bottom-color:var(--gold);
}

.text-link span {
    color:var(--gold-deep);
}

/* Hero */
.hero-meta span {
    color:#65483e;
}

.hero-meta span:before {
    content:"✦";
    margin-right:8px;
    color:var(--gold);
}

.image-slot-hero {
    border:2px solid rgba(244,212,106,.72);
    box-shadow:
        0 42px 100px rgba(91,40,45,.24),
        0 0 0 7px rgba(214,161,38,.08);
}

.floating-note-image {
    filter:
        drop-shadow(0 16px 24px rgba(100,52,31,.26))
        drop-shadow(0 0 10px rgba(244,212,106,.20));
}

.button-dark {
    border:1px solid var(--gold);
    background:linear-gradient(135deg,#251c19,var(--wine));
    box-shadow:
        0 12px 30px rgba(55,29,24,.20),
        inset 0 0 0 1px rgba(244,212,106,.12);
    transition:.25s;
}

.button-dark:hover {
    color:var(--ink);
    background:linear-gradient(135deg,var(--gold-bright),var(--gold));
    transform:translateY(-2px);
}

/* Marquee */
.marquee {
    border-top:1px solid rgba(244,212,106,.22);
    border-bottom:1px solid rgba(244,212,106,.22);
}

.marquee-track i {
    color:var(--gold-bright);
}

/* Our Story */
.story-main {
    border:1px solid var(--gold-line);
}

.story-detail {
    border-color:var(--gold-light);
    box-shadow:
        0 22px 55px rgba(93,43,45,.18),
        0 0 0 2px var(--gold);
}

blockquote {
    border-left-color:var(--gold);
}

blockquote:before {
    content:"“";
    display:block;
    margin-bottom:8px;
    color:var(--gold);
    font-family:Georgia,serif;
    font-size:50px;
    line-height:.5;
}

/* Services */
.services-section .eyebrow {
    color:var(--gold-bright);
}

.services-list {
    border-top-color:rgba(244,212,106,.22);
}

.service-row {
    border-bottom-color:rgba(244,212,106,.18);
}

.service-row:hover {
    border-left:2px solid var(--gold);
}

.service-number {
    color:var(--gold-bright);
}

.service-thumb {
    border:1px solid rgba(244,212,106,.42);
}

.service-content small {
    color:var(--coral-bright);
}

.service-arrow {
    color:var(--gold-bright);
}

/* Occasions */
.occasion-card {
    border:1px solid rgba(214,161,38,.50);
    box-shadow:0 18px 50px rgba(101,50,38,.12);
}

.occasion-overlay small {
    color:var(--gold-bright);
}

/* Manifesto */
.manifesto-section {
    background:linear-gradient(
        135deg,
        var(--coral-deep, #e84533),
        var(--coral),
        var(--sunset)
    );
}

.manifesto-copy em {
    color:var(--gold-light);
}

/* Journal */
.journal-card {
    border-bottom-color:var(--gold-line);
}

.journal-image {
    border:1px solid rgba(214,161,38,.34);
}

.journal-body small {
    color:var(--gold-deep);
}

/* Why Holy Peony */
.why-section .eyebrow,
.why-section h2 em {
    color:var(--gold-bright);
}

.why-points span {
    color:var(--gold-bright);
}

.why-points > div:hover {
    border-color:var(--gold);
    background:rgba(244,212,106,.05);
}

/* FAQ */
.faq-list details {
    border-color:rgba(156,103,18,.30);
}

.faq-list summary span {
    color:var(--gold-deep);
}

/* Contact */
.contact-card {
    border:1px solid var(--gold);
    box-shadow:
        0 28px 80px rgba(80,36,43,.24),
        0 0 0 7px rgba(214,161,38,.08);
}

.contact-copy .eyebrow,
.contact-copy h2 em {
    color:var(--gold-bright);
}

.button-light {
    color:var(--wine);
    border:1px solid var(--gold);
    background:linear-gradient(135deg,var(--paper),var(--gold-light));
}

/* Footer */
.site-footer {
    border-top:2px solid var(--gold);
}

.footer-logo {
    color:var(--gold-bright);
}

.site-footer h4 {
    color:var(--gold-light);
}

.site-footer a:hover {
    color:var(--gold-bright);
}

.footer-bottom {
    border-top-color:rgba(244,212,106,.24);
}

/* Mobile */
@media (max-width:700px) {
    .image-slot-hero {
        border-width:1px;
        box-shadow:
            0 24px 60px rgba(91,40,45,.22),
            0 0 0 5px rgba(214,161,38,.08);
    }

    .service-row {
        border-bottom-color:rgba(244,212,106,.20);
    }

    .service-number {
        color:var(--gold-bright);
    }

    .occasion-card {
        border-color:rgba(214,161,38,.36);
    }

    .contact-card {
        box-shadow:
            0 20px 50px rgba(80,36,43,.20),
            0 0 0 4px rgba(214,161,38,.08);
    }
}

/* =========================================================
   MOBILE HERO REFINEMENT
   ปรับ Hero มือถือให้ดูแฟชั่น เรียบหรู และบาลานซ์กับโลโก้
========================================================= */

@media (max-width:700px) {
    .hero {
        padding:42px 0 56px;
        overflow:hidden;
    }

    .hero-grid {
        gap:30px;
    }

    .hero-copy {
        position:relative;
        z-index:4;
    }

    .hero-visual {
        width:100%;
        min-height:0;
        margin:0;
        padding:0 0 18px;
        overflow:visible;
    }

    .image-slot-hero {
        width:100%;
        min-height:0;
        aspect-ratio:4 / 5;
        margin:0;
        overflow:hidden;
        border:1px solid rgba(244,212,106,.72);
        border-radius:28px;
        box-shadow:
            0 22px 55px rgba(91,40,45,.22),
            0 0 0 4px rgba(214,161,38,.07);
    }

    .image-slot-hero > img {
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center 27%;
    }

    .floating-note-image {
        top: 33px;
        width: 200px;
        height: 200px;
        z-index: 5;
        overflow: visible;
        filter: drop-shadow(0 10px 18px rgba(83, 42, 28, .26)) drop-shadow(0 0 7px rgba(244, 212, 106, .18));
        transform: rotate(7deg);
        right: 18px;
        left: auto;
    }

    .floating-note-image img {
        width:100%;
        height:100%;
        object-fit:contain;
    }

    .vertical-caption {
        display:none !important;
    }
}

@media (max-width:480px) {
    .hero {
        padding-top:36px;
    }

    .hero-visual {
        padding-bottom:14px;
    }

    .image-slot-hero {
        aspect-ratio:4 / 5.2;
        border-radius:24px;
    }

    .image-slot-hero > img {
        object-position:center 25%;
    }

    .floating-note-image {
  
    
        width:100px;
        height:100px;
    }
}

/* HOLY PEONY — ABOUT PAGE */
.about-breadcrumb { padding:12px 0; border-bottom:1px solid var(--gold-line); background:var(--paper); font-size:12px; }
.about-breadcrumb .container { display:flex; gap:9px; }
.about-breadcrumb a { color:var(--gold-deep); }
.about-page { overflow:hidden; }
.about-hero { position:relative; overflow:hidden; padding:86px 0 108px; background:radial-gradient(circle at 78% 15%,rgba(244,212,106,.42),transparent 24%),linear-gradient(128deg,#fff9f1 0%,#ffd4c2 50%,#ef7868 100%); }
.about-hero:before { content:""; position:absolute; inset:0; opacity:.28; background-image:linear-gradient(rgba(255,255,255,.30) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.30) 1px,transparent 1px); background-size:92px 92px; }
.about-hero-grid { position:relative; z-index:2; display:grid; grid-template-columns:.96fr 1.04fr; align-items:center; gap:78px; }
.about-hero-copy h1 { margin-bottom:18px; font-size:clamp(60px,7vw,104px); }
.about-hero-english { margin-bottom:22px; color:var(--gold-deep); font-family:Georgia,serif; font-size:18px; font-style:italic; }
.about-hero-lead { max-width:690px; margin-bottom:34px; color:#584139; font-size:18px; }
.about-hero-tags,.about-links { display:flex; flex-wrap:wrap; gap:9px; }
.about-hero-tags span,.about-links a { padding:8px 13px; border:1px solid rgba(156,103,18,.30); border-radius:999px; color:#67483e; background:rgba(255,250,245,.70); font-size:10px; font-weight:800; }
.about-links { margin-top:28px; }
.about-links a { color:var(--wine); font-size:12px; transition:.2s; }
.about-links a:hover { border-color:var(--gold); background:var(--gold-light); }
.about-media { position:relative; margin:0; overflow:hidden; background:linear-gradient(135deg,#f8ddd2,#e79b80); }
.about-media picture { display:block; width:100%; height:100%; }
.about-media picture img { display:block; width:100%; height:100%; object-fit:cover; }
.about-media figcaption { position:absolute; inset:auto 0 0; padding:50px 24px 20px; color:#fff; background:linear-gradient(transparent,rgba(35,25,22,.84)); font-size:12px; line-height:1.55; }
.about-media-hero { width:88%; height:660px; margin-left:auto; border:2px solid rgba(244,212,106,.72); border-radius:290px 290px 24px 24px; box-shadow:0 42px 100px rgba(91,40,45,.24),0 0 0 7px rgba(214,161,38,.08); }
.about-media-hero img { object-position:center 30%; }
.about-image-mockup { width:100%; height:100%; min-height:inherit; display:none; flex-direction:column; align-items:center; justify-content:center; padding:30px; border:1px dashed rgba(91,52,40,.48); color:#68483f; text-align:center; }
.about-image-mockup strong { margin-bottom:10px; color:var(--wine); font-family:Georgia,serif; font-size:27px; font-style:italic; font-weight:400; }
.about-image-mockup span { font-size:12px; font-weight:800; }
.about-image-mockup small { margin-top:6px; color:var(--gold-deep); font-size:11px; font-weight:800; }
.about-image-mockup p { max-width:440px; margin:12px 0 0; color:var(--muted); font-size:12px; }
.about-section { padding:110px 0; }
.about-section-peach { background:linear-gradient(180deg,#fff5ea,#f7d6c8); }
.about-section-legacy { background:linear-gradient(135deg,#f5c3b5,#ffd9c8); }
.about-section-dark { color:#fff6ed; background:var(--wine); }
.about-section-dark .eyebrow,.about-section-dark h2 em { color:var(--gold-bright); }
.about-section-dark .about-heading-wide > p { color:#dbc8c0; }
.about-story-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:72px; }
.about-two-columns { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:82px; }
.about-richtext p { color:var(--muted); }
.about-richtext .about-intro { color:var(--ink); font-size:19px; }
.about-dropcap:first-letter { float:left; margin:10px 12px 0 0; color:var(--coral); font-family:Georgia,serif; font-size:76px; line-height:.65; }
.about-media-landscape { height:610px; border:1px solid var(--gold-line); border-radius:24px; box-shadow:0 28px 80px rgba(99,53,40,.15); }
.about-media-portrait { width:82%; height:670px; border:2px solid rgba(244,212,106,.70); border-radius:250px 250px 18px 18px; box-shadow:0 28px 75px rgba(83,45,36,.16); }
.about-quote { margin-top:34px; padding:28px; border:1px solid var(--gold-line); background:rgba(255,250,245,.54); }
.about-quote small { display:block; color:var(--gold-deep); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.about-quote strong { display:block; margin:10px 0; color:var(--wine); font-family:Georgia,serif; font-size:27px; font-weight:400; }
.about-heading-wide { max-width:930px; }
.about-purpose-grid { display:grid; grid-template-columns:1fr 1fr; margin-top:54px; }
.about-purpose-grid article { min-height:230px; padding:28px; border:1px solid rgba(244,212,106,.20); }
.about-purpose-grid span { color:var(--gold-bright); font-family:Georgia,serif; font-style:italic; }
.about-purpose-grid h3 { margin-top:30px; font-family:Georgia,serif; font-size:27px; font-weight:400; }
.about-purpose-grid p { color:inherit; opacity:.78; font-size:14px; }
.about-definition-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:82px; }
.about-definition-grid .about-purpose-grid { margin-top:0; }
.about-definition-grid .about-purpose-grid article { border-color:var(--gold-line); }
.about-definition-grid .about-purpose-grid span { color:var(--gold-deep); }
.about-closing { background:var(--paper); }
.about-media-closing { height:620px; border:1px solid var(--gold-line); border-radius:28px; box-shadow:0 28px 80px rgba(83,45,36,.14); }
.about-closing-copy { max-width:960px; margin:68px auto 0; text-align:center; }
.about-closing-copy p { max-width:790px; margin-right:auto; margin-left:auto; color:var(--muted); }
.about-closing-copy .actions-left { justify-content:center; margin-top:32px; }

@media (max-width:1050px) {
    .about-hero-grid,.about-story-grid,.about-two-columns,.about-definition-grid { grid-template-columns:1fr; }
    .about-hero-copy { max-width:840px; }
    .about-media-hero { width:min(100%,680px); margin:0 auto; }
    .about-media-portrait { width:min(100%,680px); margin:0 auto; }
}

@media (max-width:700px) {
    .about-breadcrumb { font-size:11px; }
    .about-hero { padding:46px 0 62px; }
    .about-hero-grid { gap:34px; }
    .about-hero-copy h1 { font-size:clamp(46px,14vw,66px); }
    .about-hero-english { font-size:15px; }
    .about-hero-lead { font-size:16px; }
    .about-hero-tags span { padding:6px 10px; font-size:8px; }
    .about-media-hero { width:100%; height:auto; aspect-ratio:4 / 5; border-radius:28px; }
    .about-section { padding:72px 0; }
    .about-story-grid,.about-two-columns,.about-definition-grid { gap:42px; }
    .about-media-landscape,.about-media-closing { height:auto; aspect-ratio:4 / 5; border-radius:22px; }
    .about-media-portrait { width:100%; height:auto; aspect-ratio:4 / 5; border-radius:180px 180px 16px 16px; }
    .about-purpose-grid { grid-template-columns:1fr; margin-top:38px; }
    .about-purpose-grid article { min-height:auto; padding:23px; }
    .about-media figcaption { padding:58px 18px 16px; font-size:11px; }
    .about-closing-copy { margin-top:48px; text-align:left; }
    .about-closing-copy .actions-left { align-items:stretch; justify-content:flex-start; flex-direction:column; }
    .about-closing-copy .button,.about-closing-copy .text-link { width:100%; justify-content:center; }
}


/* =========================================================
   HOLY PEONY — BOUQUETS PAGE
========================================================= */

.bouquet-breadcrumb {
    padding:12px 0;
    border-bottom:1px solid var(--gold-line);
    background:var(--paper);
    font-size:12px;
}

.bouquet-breadcrumb .container {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
}

.bouquet-breadcrumb a {
    color:var(--gold-deep);
}

.bouquet-page {
    overflow:hidden;
}

.bouquet-hero {
    position:relative;
    overflow:hidden;
    padding:86px 0 108px;
    background:
        radial-gradient(circle at 78% 15%,rgba(244,212,106,.42),transparent 24%),
        linear-gradient(128deg,#fff9f1 0%,#ffd4c2 50%,#ef7868 100%);
}

.bouquet-hero:before {
    content:"";
    position:absolute;
    inset:0;
    opacity:.27;
    background-image:
        linear-gradient(rgba(255,255,255,.30) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.30) 1px,transparent 1px);
    background-size:92px 92px;
}

.bouquet-hero-orb {
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.bouquet-hero-orb-one {
    top:-190px;
    right:-120px;
    width:530px;
    height:530px;
    background:rgba(255,236,190,.44);
}

.bouquet-hero-orb-two {
    bottom:-170px;
    left:-130px;
    width:350px;
    height:350px;
    background:rgba(108,47,59,.13);
}

.bouquet-hero-grid {
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:.96fr 1.04fr;
    align-items:center;
    gap:78px;
}

.bouquet-hero-copy h1 {
    margin-bottom:18px;
    font-size:clamp(58px,6.8vw,100px);
}

.bouquet-hero-english {
    margin-bottom:22px;
    color:var(--gold-deep);
    font-family:Georgia,"Times New Roman",serif;
    font-size:18px;
    font-style:italic;
}

.bouquet-hero-lead {
    max-width:700px;
    margin-bottom:32px;
    color:#584139;
    font-size:18px;
}

.bouquet-hero-tags {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

.bouquet-hero-tags span {
    padding:8px 13px;
    border:1px solid rgba(156,103,18,.30);
    border-radius:999px;
    color:#67483e;
    background:rgba(255,250,245,.66);
    font-size:10px;
    font-weight:800;
    letter-spacing:.04em;
}

.bouquet-hero-actions {
    margin-top:34px;
}

.bouquet-media {
    position:relative;
    margin:0;
    overflow:hidden;
    background:linear-gradient(135deg,#f8ddd2,#e79b80);
}

.bouquet-media > img {
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.bouquet-media figcaption {
    position:absolute;
    inset:auto 0 0;
    padding:52px 24px 20px;
    color:#fff;
    background:linear-gradient(transparent,rgba(35,25,22,.84));
    font-size:12px;
    line-height:1.55;
}

.bouquet-media-hero {
    width:88%;
    height:670px;
    margin-left:auto;
    border:2px solid rgba(244,212,106,.72);
    border-radius:295px 295px 24px 24px;
    box-shadow:
        0 42px 100px rgba(91,40,45,.24),
        0 0 0 7px rgba(214,161,38,.08);
}

.bouquet-media-hero > img {
    object-position:center 30%;
}

.bouquet-image-mockup {
    width:100%;
    height:100%;
    min-height:inherit;
    display:none;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:30px;
    border:1px dashed rgba(91,52,40,.48);
    color:#68483f;
    text-align:center;
}

.bouquet-image-mockup strong {
    margin-bottom:10px;
    color:var(--wine);
    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;
    font-style:italic;
    font-weight:400;
}

.bouquet-image-mockup span {
    font-size:12px;
    font-weight:800;
}

.bouquet-image-mockup small {
    margin-top:6px;
    color:var(--gold-deep);
    font-size:11px;
    font-weight:800;
}

.bouquet-image-mockup p {
    max-width:440px;
    margin:12px 0 0;
    color:var(--muted);
    font-size:12px;
}

.bouquet-image-mockup-dark {
    color:#fff;
    background:linear-gradient(135deg,var(--wine),var(--ink));
}

.bouquet-image-mockup-dark strong,
.bouquet-image-mockup-dark small {
    color:var(--gold-bright);
}

.bouquet-image-mockup-dark p {
    color:#eadbd5;
}

.bouquet-intro-section,
.bouquet-recipient-section,
.bouquet-occasion-section,
.bouquet-craft-section,
.bouquet-quality-section,
.bouquet-related-section,
.bouquet-faq-section,
.bouquet-contact-section {
    padding:110px 0;
}

.bouquet-intro-section {
    background:var(--paper);
}

.bouquet-intro-grid {
    display:grid;
    grid-template-columns:64px .9fr 1.1fr;
    gap:50px;
}

.bouquet-section-number {
    padding-top:8px;
    color:var(--gold-deep);
    font-family:Georgia,"Times New Roman",serif;
    font-size:22px;
    font-style:italic;
}

.bouquet-intro-heading h2 {
    font-size:clamp(44px,5vw,74px);
}

.bouquet-richtext p {
    color:var(--muted);
}

.bouquet-richtext .bouquet-intro {
    color:var(--ink);
    font-size:19px;
}

.bouquet-dropcap:first-letter {
    float:left;
    margin:10px 12px 0 0;
    color:var(--coral);
    font-family:Georgia,"Times New Roman",serif;
    font-size:76px;
    line-height:.65;
}

.bouquet-two-columns {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:82px;
}

.bouquet-recipient-section {
    background:linear-gradient(180deg,#fff5ea,#f7d6c8);
}

.bouquet-media-portrait {
    width:84%;
    height:690px;
    border:2px solid rgba(244,212,106,.70);
    border-radius:260px 260px 18px 18px;
    box-shadow:0 28px 75px rgba(83,45,36,.16);
}

.bouquet-info-list {
    margin-top:34px;
    border-top:1px solid var(--gold-line);
}

.bouquet-info-list article {
    display:grid;
    grid-template-columns:48px 1fr;
    gap:20px;
    padding:22px 0;
    border-bottom:1px solid var(--gold-line);
}

.bouquet-info-list span {
    color:var(--gold-deep);
    font-family:Georgia,"Times New Roman",serif;
    font-size:16px;
    font-style:italic;
}

.bouquet-info-list h3 {
    margin-bottom:5px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:25px;
    font-weight:400;
}

.bouquet-info-list p {
    margin-bottom:0;
    font-size:14px;
}

.bouquet-occasion-section {
    color:#fff6ed;
    background:var(--wine);
}

.bouquet-occasion-section .eyebrow,
.bouquet-occasion-section h2 em {
    color:var(--gold-bright);
}

.bouquet-heading-wide {
    max-width:900px;
    margin-bottom:58px;
}

.bouquet-heading-wide > p:last-child {
    max-width:760px;
    color:#dbc8c0;
    font-size:18px;
}

.bouquet-media-wide {
    height:620px;
    border:1px solid rgba(244,212,106,.34);
    border-radius:26px;
    box-shadow:0 30px 80px rgba(36,18,22,.24);
}

.bouquet-occasion-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:52px;
}

.bouquet-occasion-grid article {
    min-height:260px;
    padding:28px;
    border:1px solid rgba(244,212,106,.18);
}

.bouquet-occasion-grid article:hover {
    border-color:var(--gold);
    background:rgba(244,212,106,.045);
}

.bouquet-occasion-grid span {
    color:var(--gold-bright);
    font-family:Georgia,"Times New Roman",serif;
    font-size:16px;
    font-style:italic;
}

.bouquet-occasion-grid h3 {
    margin-top:32px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;
    font-weight:400;
}

.bouquet-occasion-grid p {
    color:#dbc8c0;
    font-size:14px;
}

.bouquet-craft-section {
    background:linear-gradient(180deg,#fff5ea,#f5c3b4);
}

.bouquet-media-landscape {
    height:630px;
    border:1px solid var(--gold-line);
    border-radius:24px;
    box-shadow:0 28px 75px rgba(83,45,36,.14);
}

.bouquet-quality-section {
    color:#fff7ef;
    background:var(--ink);
}

.bouquet-quality-section .eyebrow,
.bouquet-quality-section h2 em {
    color:var(--gold-bright);
}

.bouquet-quality-grid {
    display:grid;
    grid-template-columns:1.08fr .92fr;
    align-items:center;
    gap:74px;
}

.bouquet-quality-grid > div > p {
    color:#cdbdb5;
}

.bouquet-quality-points {
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:38px;
}

.bouquet-quality-points article {
    min-height:210px;
    padding:25px;
    border:1px solid rgba(244,212,106,.18);
}

.bouquet-quality-points span {
    color:var(--gold-bright);
    font-family:Georgia,"Times New Roman",serif;
    font-style:italic;
}

.bouquet-quality-points h3 {
    margin-top:25px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:25px;
    font-weight:400;
}

.bouquet-quality-points p {
    color:#cdbdb5;
    font-size:13px;
}

.bouquet-media-delivery {
    height:700px;
    border:1px solid rgba(244,212,106,.38);
    border-radius:250px 250px 20px 20px;
}

.bouquet-related-section {
    background:var(--paper);
}

.bouquet-related-grid {
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:85px;
}

.bouquet-related-links {
    border-top:1px solid var(--gold-line);
}

.bouquet-related-links > a {
    display:grid;
    grid-template-columns:45px 1fr 30px;
    align-items:center;
    gap:22px;
    padding:25px 0;
    border-bottom:1px solid var(--gold-line);
    transition:.22s;
}

.bouquet-related-links > a:hover {
    padding-left:12px;
}

.bouquet-related-links span {
    color:var(--gold-deep);
    font-family:Georgia,"Times New Roman",serif;
    font-style:italic;
}

.bouquet-related-links h3 {
    margin-bottom:4px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;
    font-weight:400;
}

.bouquet-related-links p {
    margin-bottom:0;
    color:var(--muted);
    font-size:13px;
}

.bouquet-related-links b {
    color:var(--gold-deep);
    font-size:21px;
    font-weight:400;
}

.bouquet-faq-section {
    background:linear-gradient(135deg,#f5c4b5,#ffd8c8);
}

.bouquet-faq-grid {
    display:grid;
    grid-template-columns:.72fr 1.28fr;
    gap:86px;
}

.bouquet-faq-grid > div:first-child > p:last-child {
    color:var(--muted);
}

.bouquet-faq-list details {
    border-top:1px solid rgba(156,103,18,.30);
}

.bouquet-faq-list details:last-child {
    border-bottom:1px solid rgba(156,103,18,.30);
}

.bouquet-faq-list summary {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:24px 0;
    cursor:pointer;
    list-style:none;
    font-weight:800;
}

.bouquet-faq-list summary::-webkit-details-marker {
    display:none;
}

.bouquet-faq-list summary span {
    color:var(--gold-deep);
    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;
    font-weight:400;
}

.bouquet-faq-list details[open] summary span {
    transform:rotate(45deg);
}

.bouquet-faq-list details p {
    max-width:760px;
    padding:0 45px 22px 0;
    color:#664c45;
}

.bouquet-contact-section {
    background:var(--paper);
}

.bouquet-contact-card {
    min-height:440px;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:center;
    gap:70px;
    padding:74px;
    overflow:hidden;
    border:1px solid var(--gold);
    border-radius:28px;
    color:#fff6ed;
    background:
        radial-gradient(circle at 90% 20%,rgba(244,212,106,.20),transparent 24%),
        linear-gradient(145deg,var(--wine),#51252e);
    box-shadow:
        0 28px 80px rgba(80,36,43,.24),
        0 0 0 7px rgba(214,161,38,.08);
}

.bouquet-contact-card .eyebrow,
.bouquet-contact-card h2 em {
    color:var(--gold-bright);
}

.bouquet-contact-card p {
    max-width:700px;
    color:#dcc8c0;
}

@media (max-width:1050px) {
    .bouquet-hero-grid,
    .bouquet-two-columns,
    .bouquet-quality-grid,
    .bouquet-related-grid,
    .bouquet-faq-grid,
    .bouquet-contact-card {
        grid-template-columns:1fr;
    }

    .bouquet-hero-copy {
        max-width:840px;
    }

    .bouquet-media-hero {
        width:min(100%,680px);
        margin:0 auto;
    }

    .bouquet-intro-grid {
        grid-template-columns:58px 1fr;
    }

    .bouquet-intro-grid .bouquet-richtext {
        grid-column:2;
    }

    .bouquet-media-portrait {
        width:min(100%,680px);
        margin:0 auto;
    }

    .bouquet-occasion-grid {
        grid-template-columns:1fr 1fr;
    }

    .bouquet-media-delivery {
        width:min(100%,680px);
        margin:0 auto;
    }

    .bouquet-contact-card {
        gap:40px;
    }

    .bouquet-contact-card .actions {
        justify-content:flex-start;
    }
}

@media (max-width:700px) {
    .bouquet-breadcrumb {
        font-size:11px;
    }

    .bouquet-hero {
        padding:46px 0 62px;
    }

    .bouquet-hero-grid {
        gap:34px;
    }

    .bouquet-hero-copy h1 {
        font-size:clamp(45px,13.5vw,64px);
    }

    .bouquet-hero-english {
        font-size:15px;
    }

    .bouquet-hero-lead {
        font-size:16px;
    }

    .bouquet-hero-tags span {
        padding:6px 10px;
        font-size:8px;
    }

    .bouquet-hero-actions {
        align-items:stretch;
        flex-direction:column;
    }

    .bouquet-hero-actions .button,
    .bouquet-hero-actions .text-link {
        width:100%;
        justify-content:center;
    }

    .bouquet-media-hero {
        width:100%;
        height:auto;
        aspect-ratio:4 / 5;
        border-radius:28px;
    }

    .bouquet-intro-section,
    .bouquet-recipient-section,
    .bouquet-occasion-section,
    .bouquet-craft-section,
    .bouquet-quality-section,
    .bouquet-related-section,
    .bouquet-faq-section,
    .bouquet-contact-section {
        padding:72px 0;
    }

    .bouquet-intro-grid {
        grid-template-columns:1fr;
        gap:18px;
    }

    .bouquet-intro-grid .bouquet-richtext {
        grid-column:auto;
    }

    .bouquet-two-columns,
    .bouquet-quality-grid,
    .bouquet-related-grid,
    .bouquet-faq-grid {
        gap:42px;
    }

    .bouquet-media-portrait,
    .bouquet-media-delivery {
        width:100%;
        height:auto;
        aspect-ratio:4 / 5;
        border-radius:180px 180px 16px 16px;
    }

    .bouquet-media-wide,
    .bouquet-media-landscape {
        height:auto;
        aspect-ratio:4 / 5;
        border-radius:22px;
    }

    .bouquet-occasion-grid,
    .bouquet-quality-points {
        grid-template-columns:1fr;
    }

    .bouquet-occasion-grid article,
    .bouquet-quality-points article {
        min-height:auto;
        padding:23px;
    }

    .bouquet-media figcaption {
        padding:58px 18px 16px;
        font-size:11px;
    }

    .bouquet-related-links > a {
        grid-template-columns:32px 1fr 22px;
        gap:12px;
    }

    .bouquet-related-links h3 {
        font-size:23px;
    }

    .bouquet-faq-list details p {
        padding-right:0;
    }

    .bouquet-contact-card {
        min-height:0;
        padding:44px 24px;
        border-radius:22px;
    }

    .bouquet-contact-card .actions {
        align-items:stretch;
        flex-direction:column;
    }

    .bouquet-contact-card .button,
    .bouquet-contact-card .text-link {
        width:100%;
        justify-content:center;
    }
}

@media (max-width:480px) {
    .bouquet-image-mockup {
        padding:20px;
    }

    .bouquet-image-mockup strong {
        font-size:21px;
    }

    .bouquet-info-list article {
        grid-template-columns:34px 1fr;
        gap:12px;
    }

    .bouquet-info-list h3 {
        font-size:22px;
    }

    .bouquet-contact-card {
        padding:38px 20px;
    }
}