@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:wght@400;500;600&family=Pinyon+Script&display=swap');

/* NewDesign only — navy and gold preview */
body
{
    margin:0;
    width:100%;
    min-width:0;
    max-width:none;
    background:#101E35;
    color:#F5F1E8;
    font-family:'DM Sans',sans-serif;
    font-size:16px;
    line-height:1.65;
}

.pageSides, .page, #pnlProducts
{
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    background:#101E35;
    border:0;
    box-shadow:none;
}

.pageTop, .pageBottom, .shopColumn1of2, .pageBanner, .searchPanel, .productMenu
{
    display:none;
}

.column1of1, .shopColumn2of2
{
    width:100%;
    margin:0;
    padding:0;
    float:none;
}

.header
{
    position:relative;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    background:#101E35;
    border:0;
}

h1, h2, h3
{
    font-family:'Cormorant Garamond',Georgia,serif;
    font-weight:500;
    line-height:1.1;
    color:#D2B571;
    text-transform:none;
    letter-spacing:0;
}

p
{
    margin:0 0 20px;
}

a, a:visited
{
    color:#D2B571;
    text-decoration:none;
}

a:hover, a:focus-visible
{
    color:#FFFFFF;
    text-decoration:none;
}

a:focus-visible
{
    outline:2px solid #D2B571;
    outline-offset:5px;
}

.designHeader
{
    background:#101E35;
    color:#D2B571;
}

.headerContact
{
    box-sizing:border-box;
    max-height:60px;
    overflow:hidden;
    opacity:1;
    transition:max-height .4s, padding .4s, opacity .25s, border-color .4s;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 4%;
    border-bottom:1px solid rgba(210,181,113,.22);
    font-size:11px;
    letter-spacing:2px;
}

.headerContact a
{
    font-size:14px;
    letter-spacing:1px;
}

.brandRow
{
    transition:padding .4s cubic-bezier(.22,.61,.36,1);
    text-align:center;
    padding:30px 20px 24px;
}

.brandLogo
{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    color:#D2B571;
    text-decoration:none;
}

.brandName
{
    transition:font-size .4s cubic-bezier(.22,.61,.36,1), letter-spacing .4s;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:49px;
    font-weight:600;
    letter-spacing:2px;
    line-height:1.05;
}

.brandTag
{
    transition:font-size .4s cubic-bezier(.22,.61,.36,1);
    font-family:'Pinyon Script',cursive;
    font-size:32px;
    line-height:1.4;
    letter-spacing:0;
    color:#D2B571;
}

.menu
{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    background:#101E35;
    position:relative;
    z-index:20;
}
.menuDividers
{
    display:none;
}
.menu > ul > li
{
    display:block;
    position:relative;
    width:auto;
    float:none;
    margin:0;
    padding:0;
    border:0;
    background:none;
}
.menu > ul
{
    transition:padding .4s cubic-bezier(.22,.61,.36,1);
    margin:0;
    height:auto;
    list-style:none;
    background:none;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:38px;
    padding:17px 20px;
    border-top:1px solid rgba(210,181,113,.22);
    border-bottom:1px solid rgba(210,181,113,.22);
}

.menu > ul > li > a, .menu > ul > li > a:visited
{
    display:block;
    height:auto;
    font-weight:400;
    line-height:1.65;
    background:none;
    position:relative;
    color:#F5F1E8;
    text-transform:uppercase;
    font-size:11px;
    letter-spacing:1.8px;
    padding:0 0 3px;
}

.menu > ul > li > a::after
{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-4px;
    height:1px;
    background:#D2B571;
    transform:scaleX(0);
    transition:transform .25s;
}

.menu > ul > li > a:hover, .menu > ul > li > a:focus-visible
{
    color:#D2B571;
    text-decoration:none;
}
.menu > ul > li > a:hover::after, .menu > ul > li > a:focus-visible::after
{
    transform:scaleX(1);
}

.homeHero
{
    position:relative;
    height:clamp(470px,43vw,720px);
    overflow:hidden;
}

.homeHero .animationPanelAnimationType2, .homeHero .animationPanelHomepageNew
{
    position:relative;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.homeHero .animationItem
{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.slide1, .slide2
{
    position:relative;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
}

.slide1
{
    background-image:url(https://www.robertsfloristbrynmawr.co.uk/Websites/1429/Images/upload/image/slide1RF.jpg);
}

.slide2
{
    background-image:url(https://www.robertsfloristbrynmawr.co.uk/Websites/1429/Images/upload/image/slide2RF.jpg);
}

.slide1::before, .slide2::before
{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(9,21,40,.78),rgba(9,21,40,.28) 60%,rgba(9,21,40,.04));
}

.heroContent
{
    position:absolute;
    left:8%;
    top:50%;
    transform:translateY(-50%);
    max-width:780px;
    z-index:1;
}

.eyebrow
{
    font-size:11px;
    line-height:1.5;
    letter-spacing:3px;
    text-transform:uppercase;
    font-weight:500;
    color:#D2B571;
    margin:0 0 17px;
}

.heroContent h2
{
    font-size:clamp(44px,4.6vw,88px);
    color:#FFFFFF;
    margin:0 0 20px;
    line-height:1.02;
    font-weight:400;
}

.heroContent h2 em
{
    color:#E4CE97;
    font-weight:400;
}

.heroContent > p:not(.eyebrow)
{
    font-size:16px;
    color:#FFFFFF;
    margin-bottom:30px;
}

.goldButton, a.goldButton:visited, .footerText a.goldButton, .outlineButton, a.outlineButton:visited
{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    box-sizing:border-box;
    padding:13px 27px;
    font-size:11px;
    letter-spacing:1.7px;
    line-height:1.5;
    text-transform:uppercase;
    border:1px solid #D2B571;
    transition:background-color .2s,color .2s;
    color:#101E35;
    background:#D2B571;
}

.goldButton:hover, .goldButton:focus-visible, .footerText a.goldButton:hover, .footerText a.goldButton:focus-visible
{
    background:#F5F1E8;
    color:#101E35;
}

.outlineButton, a.outlineButton:visited
{
    background:transparent;
    color:#D2B571;
}

.outlineButton:hover, .outlineButton:focus-visible
{
    background:#D2B571;
    color:#101E35;
}

.homePromise
{
    display:flex;
    justify-content:center;
    gap:8%;
    padding:20px;
    font-size:10px;
    letter-spacing:2px;
    color:#D2B571;
    border-bottom:1px solid rgba(210,181,113,.22);
}

.homeCollections
{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
    padding:26px 28px;
}

.homeCard
{
    position:relative;
    min-height:450px;
    overflow:hidden;
    background:#172A45;
}

.homeCardImage
{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transition:transform .6s;
}

.homeCard::after
{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(0deg,rgba(9,21,40,.85),rgba(9,21,40,.05) 75%);
    pointer-events:none;
}

.homeCardContent
{
    position:absolute;
    bottom:30px;
    left:32px;
    right:28px;
    z-index:1;
}

.homeCardContent h2
{
    font-size:42px;
    color:#FFFFFF;
    margin:0 0 25px;
}

.homeCardContent .eyebrow
{
    margin-bottom:8px;
    color:#E4CE97;
}

.cardButton
{
    display:inline-block;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:1.7px;
    padding-bottom:8px;
    border-bottom:1px solid #D2B571;
    color:#FFFFFF;
}

.homeCardLink
{
    position:absolute;
    inset:0;
    z-index:2;
}

.homeCard:hover .homeCardImage, .homeCard:focus-within .homeCardImage
{
    transform:scale(1.04);
}

.homeCard:hover .cardButton, .homeCard:focus-within .cardButton
{
    color:#E4CE97;
}

.homeStory
{
    padding:90px 25px;
    background:linear-gradient(rgba(16,30,53,.82),rgba(16,30,53,.82)),url(https://www.robertsfloristbrynmawr.co.uk/Websites/1429/Images/upload/image/boxOuterBorderRF.jpg) center / cover;
}

.homeStoryInner
{
    max-width:700px;
    margin:0 auto;
    text-align:center;
}

.homeStory h1
{
    font-size:64px;
    margin:0 0 28px;
}

.homeStory p:not(.eyebrow)
{
    font-size:15px;
    line-height:1.9;
    color:#E2E3E6;
}

.homeStory .outlineButton
{
    margin-top:12px;
}

.homeClosing
{
    padding:85px 25px 95px;
    text-align:center;
    background:#152640;
}

.homeClosing h2
{
    font-size:52px;
    margin:0 0 20px;
}

.homeClosing p:not(.eyebrow)
{
    font-size:15px;
    color:#DCE0E6;
}

.homeClosing .goldButton
{
    margin-top:10px;
}

.footerText
{
    margin:0;
    padding:0 5%;
    width:auto;
    background:#0C172A;
    color:#CCD0D7;
    border-top:1px solid #74664B;
    font-size:13px;
}

.footerInvitation
{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:20px;
    padding:45px 0;
    border-bottom:1px solid rgba(210,181,113,.22);
}

.footerInvitation .eyebrow
{
    flex-basis:100%;
    margin:0 0 -8px;
    font-size:10px;
}

.footerInvitation h2
{
    font-size:42px;
    margin:0;
}

.footerColumns
{
    display:grid;
    grid-template-columns:1.6fr 1.2fr 1fr 1fr;
    gap:45px;
    padding:55px 0;
}

.footerColumns h3
{
    font-family:'DM Sans',sans-serif;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:11px;
    color:#D2B571;
    margin:0 0 22px;
}

.footerColumns p
{
    line-height:2;
    margin-bottom:13px;
}

.footerText a
{
    text-decoration:none;
    color:#CCD0D7;
}

.footerColumns a:hover, .footerColumns a:focus-visible
{
    color:#D2B571;
}

.footerBrand .brandName
{
    font-size:27px;
    letter-spacing:1px;
}

.footerBrand .brandTag
{
    font-size:24px;
}

.footerBrand .brandLogo
{
    color:#D2B571;
    text-decoration:none;
    margin-bottom:18px;
}

.footerBrand > p
{
    font-size:12px;
}

.footerBottom
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    border-top:1px solid rgba(210,181,113,.22);
    padding:20px 0;
    font-size:11px;
}

.footerBottom img
{
    width:140px;
    height:auto;
}

.adminpage .header, .adminpage .footerText
{
    display:none;
}

.homeCard1 .homeCardImage
{
    background-image:url(https://www.robertsfloristbrynmawr.co.uk/Websites/1429/Images/upload/image/bouquetLight.jpg);
}

.homeCard2 .homeCardImage
{
    background-image:url(https://www.robertsfloristbrynmawr.co.uk/Websites/1429/Images/upload/image/funeralLight.jpg);
}

.homeCard3 .homeCardImage
{
    background-image:url(https://www.robertsfloristbrynmawr.co.uk/Websites/1429/Images/upload/image/seasonalLight.jpg);
}

.homeCard4 .homeCardImage
{
    background-image:url(https://www.robertsfloristbrynmawr.co.uk/Websites/1429/Images/upload/image/weddingLight2.jpg);
}

.homeCard5 .homeCardImage
{
    background-image:url(https://www.robertsfloristbrynmawr.co.uk/Websites/1429/Images/upload/image/giftLight.jpg);
}

.homeCard6 .homeCardImage
{
    background-image:url(https://www.robertsfloristbrynmawr.co.uk/Websites/1429/Images/upload/image/occasionLight.jpg);
}

@media (max-width: 1100px)
{
.menu > ul
{
    gap:22px;
}
.homeCard
{
    min-height:360px;
}
.homeCardContent h2
{
    font-size:34px;
}
.footerColumns
{
    gap:25px;
    grid-template-columns:1.4fr 1fr 1fr 1fr;
}
}

@media (max-width: 700px)
{
.brandName
{
    font-size:33px;
    letter-spacing:1px;
}
.brandTag
{
    font-size:27px;
}
.headerContact
{
    font-size:8px;
    letter-spacing:1px;
}
.menu > ul
{
    gap:13px;
    padding:14px 12px;
}
.menu > ul > li > a
{
    font-size:9px;
    letter-spacing:1px;
}
.homeHero
{
    height:540px;
}
.heroContent
{
    left:7%;
    right:7%;
}
.heroContent h2
{
    font-size:48px;
}
.homePromise
{
    gap:20px;
    flex-wrap:wrap;
    font-size:8px;
    text-align:center;
}
.homeCollections
{
    grid-template-columns:1fr;
    padding:18px;
    gap:18px;
}
.homeCard
{
    min-height:390px;
}
.homeStory
{
    padding:60px 25px;
}
.homeStory h1
{
    font-size:49px;
}
.homeClosing h2
{
    font-size:40px;
}
.footerColumns
{
    grid-template-columns:1fr 1fr;
    gap:30px 20px;
}
.footerBrand
{
    grid-column:1 / -1;
}
.footerInvitation h2
{
    font-size:36px;
}
.footerBottom
{
    align-items:flex-start;
    flex-direction:column;
}
}

/* Smooth desktop header, activated only on the NewDesign preview */
.previewHeaderSpacer
{
    display:none;
}
html.previewHeaderReady .previewHeaderSpacer
{
    display:block;
}
html.previewHeaderReady .header
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    transition:box-shadow .4s;
}
html.previewHeaderCompact .header
{
    box-shadow:0 8px 28px rgba(0,0,0,.2);
}
html.previewHeaderCompact .headerContact
{
    max-height:0;
    padding-top:0;
    padding-bottom:0;
    opacity:0;
    border-color:transparent;
}
html.previewHeaderCompact .brandRow
{
    padding-top:12px;
    padding-bottom:10px;
}
html.previewHeaderCompact .brandRow .brandName
{
    font-size:32px;
    letter-spacing:1.5px;
}
html.previewHeaderCompact .brandRow .brandTag
{
    font-size:24px;
}
html.previewHeaderCompact .menu > ul
{
    padding-top:13px;
    padding-bottom:13px;
}
@media (prefers-reduced-motion: reduce)
{
    .brandRow, .brandName, .brandTag, .headerContact, .menu > ul, html.previewHeaderReady .header
    {
        transition:none;
    }
}