@charset "UTF-8";
/*****************************************************************
 * SeanCee's Cheesecakes - Unified Responsive Stylesheet
 * Author: 9o9Designs
 * Version: 1.0 (consolidated from hpstyle.css + mstyle.css + style.css)
 * Supersedes: assets/css/hpstyle.css, assets/css/mstyle.css, assets/css/style.css
 * (assets/css/popup.css and assets/css/slider.css were never actually
 * referenced by any page -- their content already lives, duplicated,
 * inside hpstyle.css/mstyle.css, so nothing from them is lost here.
 * assets/css/error.css is kept separate; it only serves /error/*.php.)
 *
 * Approach: fluid clamp()-based scaling from a 375px mobile anchor to a
 * 1440px desktop anchor, same convention as SacredExecutiveProtection's
 * main.css, so every viewport width -- including the 769-1024px
 * tablet range that was previously completely unstyled on this site --
 * renders intentionally instead of jumping at a breakpoint. A single
 * structural breakpoint at 1024/1025px is kept ONLY for true
 * layout-pattern switches (nav collapse, which background art shows,
 * text-align swaps) that can't be meaningfully interpolated.
 *
 * Home vs. inner pages: the homepage (index.php) and the inner pages (about, catering, menus, orders, ...) share
 * identical mobile styling but diverge at desktop widths for a few
 * chrome elements (header/footer height, heading sizes). Rather than
 * two parallel stylesheets, index.php's <div class='main-container'>
 * carries an added 'home' class, and the few spots that genuinely
 * differ are scoped under .home below -- everything else is shared.
 *****************************************************************/

/*** RESET / BASE ***/
/* Horizontal-scroll-clipping history, html/body/main:
   - Originally html alone had overflow-x:hidden. html/body/main ALL having
     it was tried at one point and broke native scroll-to-#anchor and JS
     scrollIntoView() sitewide (any non-visible overflow-x forces the other
     axis to compute as 'auto' per the CSS overflow spec, so all three
     became independent scroll containers) -- never do that again.
   - 2026-10-26: html alone wasn't clipping a mobile side-to-side scroll
     caused by the pop-out nav panel (.topnav -- position:fixed, right:0,
     hidden via transform:translateX(110%); transformed fixed elements can
     still count toward the page's scrollable area on some engines even
     though they're never visible). Added the same rule to body too, NOT to
     main (same anchor/scrollIntoView risk as above -- main wraps the actual
     anchor targets).
   - 2026-10-26, later same day: that body/html rule turned out to also
     silently break the sitewide sticky header (position:sticky on
     header{} below) -- ANY overflow value other than 'visible' makes an
     element a "scroll container", and a position:sticky descendant only
     sticks relative to its nearest one; with html and body both claiming
     that role instead of the real viewport, the header had nothing to
     visibly stick against. Switched both from overflow-x:hidden to
     overflow-x:clip -- clip still clips the horizontal overflow (and is
     even stricter than hidden: it blocks programmatic scrolling into the
     clipped area too) but is specifically defined to NOT create a scroll
     container, so it no longer interferes with position:sticky. */
html{
    width:100vw;
    margin:0;
    padding:0;
    /* overflow-x:clip, not hidden (2026-10-26): Shaunie reported the sticky
       header (position:sticky on header{}, added 2026-10-25) wasn't sticking
       on mobile. Root cause: ANY overflow value other than 'visible' --
       hidden, scroll, or auto -- turns an element into a "scroll container",
       and a position:sticky descendant only sticks relative to its nearest
       scroll-container ancestor. html and body both had overflow-x:hidden,
       so THEY became the sticky header's effective scroll containers instead
       of the real viewport -- since neither one actually produces its own
       separate scrollbar (the page's real scrolling happens at the viewport
       level), the header had nothing to visibly stick against and just
       scrolled off normally. 'clip' is the one overflow value that clips
       content the same way 'hidden' does but is specifically defined to NOT
       create a scroll container, so it clips horizontal overflow without
       breaking position:sticky anywhere on the page. */
    overflow-x:clip;
}
/* min-height:100vh + flex-column, with .main-container set to flex:1
   below, is what keeps the footer pinned to the bottom of the browser
   window on short pages (like /order/ with an empty cart) instead of
   leaving plain white body background showing below the footer's purple
   copyright bar when the page's content doesn't reach the viewport's
   height. On taller pages this has no visible effect at all -- flex-grow
   only kicks in when there's leftover space to fill. overflow-x:clip is
   body's copy of the horizontal-clip rule -- see the full history above
   html{}. */
body{
    width:100%;
    margin:0;
    padding:0;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:clip;
    background:#fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
}
main{
    width:100%;
}
section{ width:100%; }
/* Sitewide link color safety net -- without this, any <a> that lands inside
   a container with no class-specific color rule (like .breadcrumbs a or
   #navlinks a below) silently falls back to the browser's default blue/
   purple link colors instead of the site's palette. More specific selectors
   throughout this file override this as needed; this just sets the floor. */
a{ color:#8b3679; }

/*** visibility utilities -- partitioned with no gap at the 1024/1025 line ***/
@media only screen and (max-width:1024px){
    .hideonmobile{ display:none; }
}
@media only screen and (min-width:1025px){
    .hideondesktop{ display:none; }
}
.note{ font-size: clamp(0.8em, calc(0.8em + 0.1 * ((100vw - 375px) / 1065)), 0.9em); }
/* Shaunie: the reviews-section intro note ("A few of our customer
   reviews...") should read at the same size as Featured Cheesecake's
   paragraph (1em/16px), not the smaller fine-print size .note uses
   everywhere else (checkout confirmations, policy "last updated" lines,
   form disclaimers, etc.) -- scoped here so only this one instance
   changes. The link inside it isn't styled separately, so it inherits
   this size too. */
#reviews .note{ font-size:1em; }
/* Shaunie: same ask for the /order/ page's empty-cart message -- also
   using the shared small .note size by default, bumped to match the
   site's normal body text (1em/16px) for just this one instance. */
#emptyCartMessage{ font-size:1em; }

/*** FRAME ***/
.main-container{
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    flex-flow:row wrap;
    justify-content: flex-start;
    gap:0px;
    width:100%;
    /* grows to fill any leftover vertical space in body's flex column
       (see body comment above), pushing footer down to the bottom of
       the window on short pages instead of leaving a gap below it */
    flex:1 0 auto;
}

/*** HEADER / NAV (shared chrome; .home overrides the few spots that differ) ***/
header{
    width:100%;
    height: clamp(152px, calc(152px + 48 * ((100vw - 375px) / 1065)), 200px);
    z-index:1000;
    /* Shaunie (2026-10-25): sticky header extended sitewide -- originally
       home-page only, now every page keeps its header pinned while
       scrolling. */
    position: sticky;
    top: 0;
    /* was a transparent base layer -- harmless everywhere the header is in
       normal document flow (nothing ever renders "underneath" it there),
       but once the header is position:sticky, page content scrolls up
       underneath it and showed through the transparent band above/below
       the gold image strip. #fff matches the page's own background, so
       nothing bleeds through once it's pinned. */
    background: url('/assets/images/goldbackground.webp') no-repeat 0 56px / 100% 72px, #fff;
}
.home header{
    /* homepage header never grows past its mobile height -- it's a flat 152px at every width */
    height:152px;
}
.prenav{
    height: 56px;
    width:100%;
}
.nav, #nav{
    height:96px;
    width:100%;
}
@media only screen and (min-width:1025px){
    /* old inner-page markup used plain .prenav/.nav rows instead of #nav; give the
       desktop-only taller header some extra breathing room to match the original */
    .prenav{ height:60px; }
    .nav{ height:90px; }
}
.headerlogo{
    width: clamp(128px, calc(128px + 24 * ((100vw - 375px) / 1065)), 152px);
    height: clamp(128px, calc(128px + 24 * ((100vw - 375px) / 1065)), 152px);
    background: url('/assets/images/headerlogo.webp') no-repeat 50% 50% / 100% 100%, transparent;
    margin-left:auto;
    margin-right:auto;
    margin-top:8px;
}
.headerlogo img{
    width: clamp(128px, calc(128px + 24 * ((100vw - 375px) / 1065)), 152px);
    height: clamp(128px, calc(128px + 24 * ((100vw - 375px) / 1065)), 152px);
    margin-left:auto;
    margin-right:auto;
}
.headerbox{
    width:50%;
    float:left;
}
@media only screen and (min-width:1025px){
    .headerbox{ width:49%; }
}
nav ul{
    font-family: Montserrat, sans-serif;
    font-size:20px;
    color:#fff;
    text-transform: uppercase;
    margin:16px 0;
    padding:0;
}
@media only screen and (min-width:1025px){
    nav ul{ margin:25px 0; }
}
nav li:first-child{ margin-left:0px; }
nav li{
    display:inline;
    text-align:left;
    padding:10px 15px;
}
nav li a{
    color:#fff;
    text-decoration:none;
}
/* hover-only color changes are gated behind (hover:hover) so tapping a link
   on a touch device doesn't leave it "stuck" showing its hover color until
   the next unrelated tap elsewhere on the page */
@media (hover:hover) and (pointer:fine){
    nav li a:hover{ color:#316484; }
}

/*** buttons (shared across header/hero/sections) ***/
.whitebtn{
    width: clamp(116px, calc(116px + 64 * ((100vw - 375px) / 1065)), 180px);
    height: clamp(40px, calc(40px + 8 * ((100vw - 375px) / 1065)), 48px);
    background: transparent;
    font-size: clamp(0.7em, calc(0.7em + 0.5 * ((100vw - 375px) / 1065)), 1.2em);
    text-align:center;
    color:#8b3679;
    border:1px solid transparent;
    margin-top:8px;
    margin-left:8px;
    text-transform:lowercase;
    letter-spacing:4px;
    padding-left:8px;
    padding-right:8px;
    line-height:16px;
    border-radius:999px;
}
.whitebtn span{
    font-size:.8em;
    letter-spacing:6px;
    text-transform:lowercase;
}
.pinkbtn{
    width: clamp(116px, calc(116px + 64 * ((100vw - 375px) / 1065)), 180px);
    height: clamp(40px, calc(40px + 8 * ((100vw - 375px) / 1065)), 48px);
    background:#8b3679;
    font-size: clamp(0.7em, calc(0.7em + 0.2 * ((100vw - 375px) / 1065)), 0.9em);
    text-align:center;
    color:#fff;
    border:1px solid #8b3679;
    margin-top:8px;
    margin-left:8px;
    text-transform:lowercase;
    letter-spacing:4px;
    padding-left:8px;
    padding-right:8px;
    box-shadow:3px 2px #ccc;
    line-height:14px;
    border-radius:999px;
}
@media (hover:hover) and (pointer:fine){
    .pinkbtn:hover{ opacity:.8; color:#fff; }
}
@media only screen and (min-width:1025px){
    .pinkbtn, .whitebtn{ margin-left:0; text-transform:uppercase; letter-spacing:normal; }
    /* header's phone button only (not the About-page pinkbtn CTA) -- .prenav is 60px tall
       at desktop, so a flat 40px button with 10px margin-top centers exactly: 10 + 40 + 10 = 60 */
    header .pinkbtn{
        height:40px;
        line-height:38px;
        margin-top:10px;
    }
}
.pinkbtn a, .pinkbtn-long a, .pinkbtn-xlong a{
    color:#fff;
    text-decoration:none;
}
/* header's phone button only -- match Featured Cheesecake's font-size
   (confirmed live: 1em/16px, the plain inherited default) without
   touching line-height, which stays whatever .pinkbtn/its desktop
   override already set. */
header .pinkbtn{
    font-size:1em;
}
/* Shaunie: the About page's "View Our Menu" button (the only .pinkbtn use
   with a label this long -- others are short, e.g. "Order") wrapped to 2
   lines inside .pinkbtn's normal mobile width (clamp(116px..180px)), which
   was sized for those shorter labels. Scoped to this one button via its
   own class rather than widening .pinkbtn sitewide, and only on
   mobile/tablet -- desktop's wider .pinkbtn (up to 180px) plus normal
   (non-spaced-out) letter-spacing already fits fine there. */
@media only screen and (max-width:1024px){
    .viewmenu-btn{
        width: clamp(165px, calc(165px + 25 * ((100vw - 375px) / 1065)), 190px);
        white-space:nowrap;
    }
}
.pinkbtn-long{
    width: clamp(220px, calc(220px + 0 * ((100vw - 375px) / 1065)), 220px);
    height: clamp(40px, calc(40px + 8 * ((100vw - 375px) / 1065)), 48px);
    background:#8b3679;
    font-size:.9em;
    text-align:center;
    color:#fff;
    border:1px solid #8b3679;
    margin-top:8px;
    text-transform:uppercase;
    padding-left:10px;
    padding-right:10px;
    box-shadow:3px 2px #ccc;
    border-radius:999px;
}
@media (hover:hover) and (pointer:fine){
    .pinkbtn-long:hover{ opacity:.8; color:#fff; }
}
.pinkbtn-long:disabled{
    background:#c9a8bd;
    border-color:#c9a8bd;
    cursor:default;
    opacity:1;
}
.pinkbtn-xlong{
    /* was a flat 320px/35px -- too narrow for "Start Your Catering Order
       Online" at this font-size, so it wrapped to a 2nd line that the
       fixed 35px height then clipped. Only one button on the site uses
       this class, so widening it here is safe. Responsive (clamp, not a
       flat px) since this button was never adjusted for mobile either;
       white-space:nowrap guarantees no wrap at any width this clamp
       reaches, and height:auto (with padding instead of a fixed height)
       keeps it from clipping if it ever did wrap on something narrower. */
    width: clamp(300px, 85vw, 420px);
    white-space:nowrap;
    height:auto;
    background:#8b3679;
    font-size:.9em;
    text-align:center;
    color:#fff;
    border:1px solid #8b3679;
    margin-top:8px;
    text-transform:uppercase;
    padding:12px 20px;
    border-radius:999px;
}
.goldbtn{
    min-width: clamp(160px, calc(160px + 20 * ((100vw - 375px) / 1065)), 180px);
    height: clamp(48px, calc(48px + 0 * ((100vw - 375px) / 1065)), 48px);
    background: url('/assets/images/goldbackground.webp') no-repeat 0 0 / 100% 100px;
    font-size:.9em;
    text-align:center;
    color:#8b3679;
    border:1px solid transparent;
    margin-top:8px;
    text-transform:uppercase;
    padding: 8px 14px;
    border-radius:999px;
}
/* "View All Reviews" (and every other .goldbtn) was reported showing its
   hover color (a blue-ish navy) permanently on mobile -- that's the sticky
   :hover state Android/iOS Chrome apply after a tap, since touch has no
   real hover to release. Gating behind (hover:hover) fixes it everywhere
   this class is used, not just the reviews button. */
@media (hover:hover) and (pointer:fine){
    .goldbtn:hover{ opacity:.8; color:#316484; }
}
.goldbtn a, .goldbtn-long a{ color:#fff; text-decoration:none; }
.goldbtn-long{
    min-width: clamp(220px, calc(220px + 0 * ((100vw - 375px) / 1065)), 220px);
    height: clamp(40px, calc(40px + 8 * ((100vw - 375px) / 1065)), 48px);
    background: url('/assets/images/goldbackground.webp') no-repeat 0 0 / 100% 100px;
    font-size:.9em;
    text-align:center;
    color:#8b3679;
    border:1px solid transparent;
    margin-top:8px;
    text-transform:uppercase;
    padding-left:20px;
    padding-right:20px;
    border-radius:999px;
}
.orderbtn{
    position:relative;
    display:inline-block;
    box-sizing:border-box;
    text-decoration:none;
    color:#000;
    width: clamp(128px, calc(128px + 7 * ((100vw - 375px) / 1065)), 135px);
    height:36px;
    background: url('/assets/images/pie.webp') no-repeat 90px 50% / 32px 32px, #fff;
    margin-top:10px;
    font-size:.8em;
    line-height:36px;
    text-transform:lowercase;
    text-align:left;
    padding-left:25px;
    border:1px solid transparent;
    vertical-align:middle;
    border-radius:999px;
}
@media only screen and (min-width:1025px){
    /* .prenav is 60px tall at desktop (vs. 56px elsewhere) -- re-center for the taller slot */
    .orderbtn{ margin-top:12px; }
}
@media (hover:hover) and (pointer:fine){
    .orderbtn:hover{ opacity:.8; color:#316484; }
    .orderbtn a:hover{ color:blue; }
}
/*** itemcount is pinned with the exact same position/size as the pie background
     image above (90px, 50%, 32x32) and flex-centers its own text within that box --
     anchoring to the same numbers the background uses is what keeps the number
     centered on the pie regardless of float/line-height quirks. ***/
.orderbtn div{
    position:absolute;
    top:50%;
    left:90px;
    transform:translateY(-50%);
    width:32px;
    height:32px;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:bold;
    font-size:.8em;
    line-height:normal;
}
.menu{ width:32px; height:32px; }
.menu img{
    width: clamp(32px, calc(32px + 8 * ((100vw - 375px) / 1065)), 40px);
    height: clamp(32px, calc(32px + 8 * ((100vw - 375px) / 1065)), 40px);
    margin-top: 8px;
    margin-right: 16px;
}
.menu span{ font-size:.9em; }
button img{
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

/*** pop-out nav panel (shared markup/behavior across every page, triggered
     by the chocolate-box icon on both desktop and mobile headers). Modeled
     on Sacred Executive Protection's slide-in .topnav/.nav-backdrop pattern,
     re-skinned in SeanCee's white/pink/gold palette instead of Sacred's
     black/gold. ***/
.nav-backdrop{
    position: fixed;
    top: 0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.5);
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.nav-backdrop.open{ opacity:1; pointer-events:auto; }
.topnav{
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    /* keep vertical scrolling available (the menu can still run tall on a
       short phone screen) but hide the scrollbar track itself */
    scrollbar-width:none; /* Firefox */
    -ms-overflow-style:none; /* old Edge/IE */
    position:fixed;
    z-index:999;
    top:0;
    right:0;
    bottom:0;
    width: clamp(300px, calc(300px + 100 * ((100vw - 375px) / 1065)), 400px);
    background:#fff;
    padding: 30px 30px 40px;
    box-shadow: -3px 0 12px rgba(0,0,0,.2);
    transform: translateX(110%);
    opacity:0;
    pointer-events:none;
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .3s ease;
}
.topnav::-webkit-scrollbar{ display:none; } /* Chrome/Safari/Edge */
.topnav.open{ transform:translateX(0); opacity:1; pointer-events:auto; }
.topnav-close{
    position:absolute;
    top:16px;
    right:16px;
    width:32px;
    height:32px;
    background:none;
    border:none;
    color:#d7b551;
    font-size:1.8em;
    line-height:1;
    padding:0;
    cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
    .topnav-close:hover{ opacity:.75; }
}
.topnav .logo img{
    width:75px;
    height:75px;
    margin-bottom:10px;
}
@media only screen and (min-width:1025px){
    /* desktop only, per Shaunie -- mobile/tablet keep the 75px default above */
    .topnav .logo img{
        width:110px;
        height:110px;
    }
}
.topnav ul{
    list-style:none;
    margin:0;
    padding:0;
    width:100%;
}
.topnav ul img{ width:24px; height:24px; }
.topnav .contactbox{
    /* was .8em, smaller than the nav menu items (#navlinks a, 1em) --
       Shaunie wants the phone/email links to match that */
    font-size:1em;
    margin-top:15px;
    color:#8b3679;
}
.topnav .contactbox img{ width:18px; height:18px; vertical-align:middle; margin-right:6px; }
.topnav .contactbox .contactrow{ margin-bottom:8px; }
.topnav .contactbox a{ color:#8b3679; text-decoration:none; }
.topnav span{ text-transform:lowercase; }
#navlinks li{
    list-style-type:none;
    padding:5px 0;
    background-image: linear-gradient(80deg, #c89c0c, #d7b551 100%);
    background-repeat:no-repeat;
    background-size:100% 0.1em;
    background-position:0 100%;
}
#navlinks a{
    color:#8b3679;
    text-decoration:none;
    /* matches Featured Cheesecake's paragraph font-size (1em/16px,
       confirmed live via getComputedStyle -- that section has no explicit
       size override, this just states the same value explicitly) */
    font-size:1em;
}
@media (hover:hover) and (pointer:fine){
    #navlinks a:hover{ color:#5c2050; }
}
#navlinks .has-submenu{ background-image:none; }
#navlinks .submenu{
    list-style:none;
    margin: 4px 0 0 15px;
    padding:0;
}
#navlinks .submenu li{ background-image:none; padding:3px 0; }
#navlinks .submenu a{ font-size:1em; }
@media only screen and (max-width:600px){
    .topnav{ width:85vw; max-width:340px; padding:20px 20px 24px; }
}
/* Shaunie: "info@seanceescheesecakes.com" wrapped inside the pop-out nav's
   contact box on narrow phones -- not enough room next to the email icon
   even at .topnav's own max-width:340px cap above. Widened that cap
   (390px) and shrunk the contact icons a touch (18px -> 15px) to free up
   a little more room; white-space:nowrap guarantees the address itself
   never wraps now that there's space for it. */
@media only screen and (max-width:600px){
    .topnav{ max-width:390px; }
    .topnav .contactbox img{ width:15px; height:15px; }
    .topnav .contactbox a{ white-space:nowrap; }
}

/*** heading type (shared size scale; .home overrides where it genuinely differs) ***/
h1{
    color:#316484;
    font-family: "Bodoni Moda", serif;
    font-weight:400;
    font-style:normal;
    font-size: clamp(2em, calc(2em + 0.5 * ((100vw - 375px) / 1065)), 2.5em);
    text-transform:uppercase;
    margin-top: clamp(38px, calc(38px + 30 * ((100vw - 375px) / 1065)), 68px);
    line-height: clamp(45px, calc(45px + 20 * ((100vw - 375px) / 1065)), 65px);
}
.home h1{
    font-size: clamp(2em, calc(2em + 0.8 * ((100vw - 375px) / 1065)), 2.8em);
}
/* inner pages only -- half the breadcrumb-to-title gap; the home page's hero
   h1 keeps the full margin-top above since it isn't following a breadcrumb row */
.main-container:not(.home) h1{
    margin-top: clamp(19px, calc(19px + 15 * ((100vw - 375px) / 1065)), 34px);
}
h2{
    color:#316484;
    text-align:center;
    font-family: "Bodoni Moda", serif;
    font-weight:400;
    font-style:normal;
    font-size: clamp(1.8em, calc(1.8em + 0.4 * ((100vw - 375px) / 1065)), 2.2em);
    margin-top:40px;
    text-transform:uppercase;
}
/* old inner pages never center their h2/h3 -- breadcrumbs-style page titles stay left */
.main-container:not(.home) h2,
.main-container:not(.home) h3{
    text-align:left;
}
h3{
    color:#316484;
    text-align:center;
    font-family: "Bodoni Moda", serif;
    font-weight:400;
    font-style:normal;
    font-size: clamp(1.6em, calc(1.6em + 0.4 * ((100vw - 375px) / 1065)), 2em);
    margin-top:40px;
    text-transform:uppercase;
}
.accent{
    width:200px;
    height:30px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:10px;
    background: url('/assets/images/heart.webp') no-repeat 0% 0 / 24px 24px,
                url('/assets/images/accentbg.webp') no-repeat 26px 47% / 175px 5px;
}
.breadcrumbs{
    width:100%;
    color:#8b3679;
    margin-top: clamp(10px, calc(10px + 6 * ((100vw - 375px) / 1065)), 16px);
}
/* anchors don't inherit `color` from .breadcrumbs by default (the browser's
   own link-blue always wins unless the <a> rule sets a color itself), which
   is why breadcrumb links were rendering blue on every inner page */
.breadcrumbs a{ color:#8b3679; text-decoration:none; }
@media (hover:hover) and (pointer:fine){
    .breadcrumbs a:hover{ color:#316484; }
}
.indent15{ margin-left:15px; }
/* inner pages only -- breathing room between the last content section and
   the footer band, which otherwise butts straight up against it */
.main-container:not(.home) main{
    padding-bottom: clamp(40px, calc(40px + 40 * ((100vw - 375px) / 1065)), 80px);
}
/* Shaunie: inner-page content sat flush against the screen edges on phones.
   Bootstrap's .row has a -0.75rem margin and its columns a +0.75rem padding
   (standard gutter), which cancel out to zero net inset -- fine when a
   .container wraps the row and supplies that inset back, but these pages
   never use one, so col-md-8's content had nothing restoring any side
   margin below Bootstrap's md breakpoint (768px), where col-md-2/8/2 all
   collapse to 100%-width stacked columns. Adds a small side margin back on
   phones only; tablet/desktop already have real col-md-2 spacer columns on
   either side and are untouched. */
@media only screen and (max-width:767px){
    .main-container:not(.home) .col-md-8{
        padding-left: calc(0.75rem + 10px);
        padding-right: calc(0.75rem + 10px);
    }
}

/*** FOOTER FRAME (shared; .home overrides height + overlay height, which genuinely differ) ***/
/* footer and #overlay used to each carry their own independent fixed/clamped
   height (an approximation of the original two-different-page-types' numbers),
   which never quite matched -- leaving a gap at the bottom of footer where
   its own plain background (the pink mosaic on the homepage) peeked out below
   the gold #overlay band. #overlay holds ALL of the footer's actual content,
   so instead of chasing two independently-guessed numbers, footer and #overlay
   both just size to their content now -- there is no longer a gap to have. */
footer{
    width: 100%;
    /* never shrunk by body's flex column -- keeps its natural height */
    flex-shrink:0;
}
.home footer{
    background: url('/assets/images/pinkbg.webp') 0 0 no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
footer #overlay{
    width:100%;
    background: url('/assets/images/goldbackground.webp') no-repeat 0% 0% / 100% 100%;
    padding-top:15px;
    /* no padding-bottom: #copyright is the last row and must be the very last thing
       painted in the footer -- any bottom padding here shows as a gold strip below
       the pink copyright bar, which is the "overage" being fixed. #copyright already
       has its own padding-top/bottom for internal breathing room. */
}
footer #logo img{
    width:150px;
    height:150px;
    margin-left:auto;
    margin-right:auto;
}
footer a{ color:#000; text-decoration:none; }
footer a:hover{ color:#a59b8f; text-decoration:none; }
footer p{ line-height:16px; margin-top:0; margin-bottom:0; }
footer h5{ color:#000; margin-top:30px; margin-bottom:0; padding-bottom:0; }
.footer-contact{ margin-bottom: clamp(8px, calc(8px + 8 * ((100vw - 375px) / 1065)), 16px); }
.footer-contact-item{
    display:block;
    line-height:20px;
    margin-bottom:8px;
}
.footer-social{ margin-top: clamp(8px, calc(8px + 8 * ((100vw - 375px) / 1065)), 16px); }
.footer-disclaimer{
    margin-top: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1065)), 24px) !important;
    margin-bottom: clamp(8px, calc(8px + 8 * ((100vw - 375px) / 1065)), 16px) !important;
}
@media only screen and (min-width:1025px){
    .footer-contact-item{ display:inline-block; margin:0 15px 0 0; }
    .footer-contact-item:last-child{ margin-right:0; }
}
footer .cdetail{
    height:30px;
    text-align:left;
    padding-top:3px;
    padding-bottom:3px;
    margin-top:5px;
}
footer .clearbox{ width:24px; height:24px; }
footer .cdetail img{ margin-right:3px; margin-top:3px; }
footer .rdetail{ min-height:75px; line-height:16px; margin-top:5px; }
footer #copyright{
    width:100%;
    background:#8b3679;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size:.9em;
    font-family: "Oxygen", "sans-serif";
    text-align: center;
}
footer #copyright p{
    font-size: .9em;
    text-align: center;
    color:#fff;
}
footer #copyright a{ color: #f3dbe9; text-decoration:none; font-family: "Oxygen", "sans-serif"; }
footer #copyright a:hover{ color:#ccc; }
footer .disclaimer{ font-size:.8em; text-align:center; margin-top:30px; }
footer .disclaimer a{ color:#000; text-decoration:none; }
footer .disclaimer a:hover{ color:#a59b8f; }
footer #refund p{ margin-left:15px; }


/*** HOME-ONLY: HERO ***/
.hero{
    height: clamp(549px, calc(549px + 30 * ((100vw - 375px) / 1065)), 579px);
    padding:0px;
    /* Shaunie: mobile only -- move the 3 cheesecake product photos up ~35px
       (midpoint of the requested 30-40px) by subtracting a fixed px amount
       from each one's existing percentage y-position via calc(). This keeps
       the original percentage-based horizontal/vertical placement math
       intact and just offsets it, rather than guessing new percentages that
       would only be right at one viewport height. The >=1025px desktop
       background block below is untouched -- this request was mobile-only. */
    background: url('/assets/images/ssbg.webp') no-repeat 50% 100% / cover,
                url('/assets/images/fadedlogo.webp') no-repeat 100% 10% / 150px 130px,
                url('/assets/images/strawberrycheesecake.webp') no-repeat 60% calc(99% - 35px) / 150px 162px,
                url('/assets/images/cheesecake3.webp') no-repeat 90% calc(88% - 35px) / 107px 162px,
                url('/assets/images/cheesecake2.webp') no-repeat 0% calc(99% - 35px) / 185px 162px;
}
@media only screen and (min-width:1025px){
    .hero{
        margin-top:0px;
        background: url('/assets/images/ssbg.webp') no-repeat 50% 0% / 1110px 620px,
                    url('/assets/images/fadedlogo.webp') no-repeat 80% 20% / 152px 132px,
                    url('/assets/images/strawberrycheesecake.webp') no-repeat 50% 98% / 283px 306px,
                    url('/assets/images/cheesecake3.webp') no-repeat 63% 80% / 199px 300px,
                    url('/assets/images/cheesecake2.webp') no-repeat 32% 98% / 400px 351px;
    }
}
.herocontent{ margin-top:-65px; } /* Shaunie: was -30px; moved up another ~35px (requested 30-40px) on mobile, per screenshot */
.herocontent span{ width:90%; float:left; }
.herocontent p{ width:5%; }
@media only screen and (min-width:1025px){
    .herocontent{ margin-top:0; }
    .herocontent span{ width:95%; }
    .herocontent p{ width:5%; margin-top:48px; }
}
.heroaccent{
    width: clamp(10%, calc(15% - 5 * ((100vw - 375px) / 1065)), 15%);
    height: clamp(185px, calc(185px + 81 * ((100vw - 375px) / 1065)), 266px);
    float:left;
    margin-left:3%;
    background: url('/assets/images/heart.webp') no-repeat 95% 0 / 16px 16px,
                url('/assets/images/ssaccent.webp') no-repeat 85% 21px / 5px 195px;
}
@media only screen and (min-width:1025px){
    .heroaccent{
        margin-left:0;
        background: url('/assets/images/heart.webp') no-repeat 100% 0 / 24px 24px,
                    url('/assets/images/ssaccent.webp') no-repeat 93% 27px / 5px 225px;
    }
}

/*** HOME-ONLY: REWARDS & SPECIALS ***/
#reward{
    height:395px;
    background: url('/assets/images/pinkbg.webp') 0 0 no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
@media only screen and (min-width:1025px){
    #reward{ border-top:1px solid #fff; }
}
#reward p{
    width:80%;
    margin-left:auto;
    margin-right:auto;
}
#reward .overlay{
    height: clamp(345px, calc(350px - 5 * ((100vw - 375px) / 1065)), 350px);
    width:100%;
    margin-top:20px;
    background: url('/assets/images/fadedlogo.webp') no-repeat 5% 40% / 150px 130px, #fff;
}
@media only screen and (min-width:1025px){
    #reward .overlay{
        background: url('/assets/images/fadedlogo.webp') no-repeat 28% 40% / 152px 132px, #fff;
    }
}

/*** HOME-ONLY: FEATURED ***/
.featured{
    height: clamp(700px, calc(820px - 120 * ((100vw - 375px) / 1065)), 820px);
    background: url('/assets/images/fadedlogo.webp') no-repeat 80% 90% / 150px 130px, #fff;
    margin-bottom: clamp(40px, calc(40px + 10 * ((100vw - 375px) / 1065)), 50px);
}
@media only screen and (min-width:1025px){
    .featured{ background: url('/assets/images/fadedlogo.webp') no-repeat 50% 50% / 150px 130px, #fff; }
}
.featuredbox{
    width: clamp(285px, calc(285px + 115 * ((100vw - 375px) / 1065)), 400px);
    height: clamp(295px, calc(295px + 115 * ((100vw - 375px) / 1065)), 410px);
    background: url('/assets/images/pinkbg.webp') no-repeat 0 0 / 100% 100%;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    padding-top:5px;
    margin-top:20px;
    margin-bottom:30px;
    border-top:10px solid #fff;
}
#featured .overlay{
    width: clamp(295px, calc(295px + 105 * ((100vw - 375px) / 1065)), 400px);
    height: clamp(285px, calc(285px + 115 * ((100vw - 375px) / 1065)), 400px);
    margin-top:15px;
    margin-left:20px;
    background:#fff;
    padding-right:5px;
    padding-top:10px;
    border:5px solid transparent;
    border-image: url('/assets/images/pinkbg.webp') 25% stretch;
}
#featured img{
    width: clamp(250px, calc(250px + 50 * ((100vw - 375px) / 1065)), 300px);
    height: clamp(260px, calc(260px + 40 * ((100vw - 375px) / 1065)), 300px);
    margin-top:5px;
    margin-left: clamp(25px, calc(25px + 30 * ((100vw - 375px) / 1065)), 55px);
    background: url('/assets/images/clear.webp') no-repeat 50% 50% / 100px 100px;
}
#featured p{
    width: clamp(65%, calc(65% + 25 * ((100vw - 375px) / 1065)), 90%);
    margin-left:5%;
    margin-right:auto;
}
@media only screen and (min-width:1025px){
    #featured p{ width:65%; margin-left:auto; }
}
/* mobile only -- image above the text (the 65-90% width above was sized for
   the old two-column desktop layout; stacked on mobile it read as narrow
   and cramped), and left-align since the content no longer sits beside a
   centered image */
@media only screen and (max-width:1024px){
    #featured .row{ display:flex; flex-wrap:wrap; }
    /* 16px side padding so the title/paragraph/button aren't flush against
       the screen edge -- box-sizing:border-box keeps the column's own
       width:100% (set by the base mobile-first grid rule) from growing
       past the viewport once padding is added */
    #featured .col-md-6.hideondesktop{ order:2; text-align:left; box-sizing:border-box; padding-left:16px; padding-right:16px; }
    #featured .col-md-4{ order:1; }
    /* .accent keeps its default auto-centering (not left:0 like the rest of
       this block) -- the title/paragraph stay left-aligned, but the small
       heart+line accent graphic should sit centered beneath the title */
    #featured .col-md-6.hideondesktop p{
        width:100%;
        margin-left:0;
        margin-right:0;
        /* Shaunie (2026-10-26): paragraph read as edge-to-edge on mobile --
           adding padding directly on the <p> itself (box-sizing:border-box
           so it can't push width past 100% of its already-full-width
           parent) rather than relying only on the parent column's own
           16px padding above, since this is what was reported as touching
           the screen edge. */
        box-sizing:border-box;
        padding-left:10px;
        padding-right:10px;
    }
    #featured .col-md-6.hideondesktop .text-center{ text-align:left; }
}

/*** /menu/ INDEX PAGE: category boxes, same visual recipe as the
     homepage's "Choose Your Cheesecake Style" section (reuses
     .clearbox/.pinkbox/.catoverlay below as-is) but with a flex-wrap
     container instead of a fixed total height, since that fixed height
     is calibrated specifically for the homepage's 6 boxes in a 2-row
     grid and this page has 8, sized to fit inside the col-md-8 column
     the grid now lives in (see .menu-catboxes .clearbox/.pinkbox below)
     rather than the viewport. ***/
.menu-catboxes{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    box-sizing:border-box;
    width:100%;
    margin: 15px 0 0;
    padding: 24px clamp(16px, 8vw, 32px);
    /* same marbled background as before -- just without background-attachment:
       fixed, which pinned the image to the viewport (a parallax scroll effect)
       instead of scrolling normally with the page. background-origin/-clip:
       content-box keeps the image inside the padding instead of under it, so
       the padding above reads as a plain white frame around the grid -- the
       same look the homepage's equivalent section gets from its col-md-1
       gutter columns on either side of .catboxes. Left/right caps at 32px
       (1x the original side padding) -- Shaunie tried 3x (96px) first and
       found it too much, dialing back to 1x. Still clamps down to 16px on
       very narrow phones so it doesn't eat into col-md-8's width faster
       than the boxes' own 220px min-width can shrink to absorb. */
    background: url('/assets/images/pinkbg.webp') no-repeat center / cover;
    background-origin:content-box;
    background-clip:content-box;
}
/* Sized as a fraction of this flex container's own width (which is now the
   col-md-8 column, not the viewport) so the grid genuinely fits inside
   col-md-8 at any screen size, shrinking the boxes on narrower columns
   instead of overflowing past them. aspect-ratio keeps each box square
   without needing a matching fixed/clamped height. .clearbox/.pinkbox's
   own 400x400 px rule (shared with the homepage's identical boxes) still
   sets the upper bound via max-width below. */
.menu-catboxes .clearbox,
.menu-catboxes .pinkbox{
    flex: 1 1 30%;
    max-width:400px;
    min-width:220px;
    height:auto;
    aspect-ratio:1 / 1;
    /* vertically centers the white .catoverlay card inside this colored
       box (see .catoverlay's margin-top:0 override below) -- the shared
       .catoverlay{margin-top:...} is a small, near-fixed few px, calibrated
       for the homepage's fixed 400x400 box. On this page the box itself
       can shrink, so that small top margin left almost all of the leftover
       83.75%-vs-100% space stacked up at the bottom instead of split
       evenly, which is what Shaunie flagged (big purple gap under the
       card, almost none above it). */
    display:flex;
    align-items:center;
    /* horizontally centers the card too -- see .catoverlay's
       margin-left:0 override below */
    justify-content:center;
}
/* the inner white "card" was sized in fixed px to match its then-fixed
   400px parent; now that the parent can shrink, size it as a percentage
   of the parent instead (335/400 = 83.75%) so it keeps the same framed
   look at every box size */
.menu-catboxes .catoverlay{
    width:83.75%;
    height:83.75%;
    margin-top:0;
    /* Shaunie: the card was off-center (big gap on one side, almost none
       on the other) the narrower this page's box got. It was still
       inheriting the homepage's fixed margin-left (clamp(20px..25px)),
       which only roughly centers a FIXED 335px card inside a FIXED 400px
       box -- here the card is a PERCENTAGE of a box that shrinks down to
       220px wide on phones (see flex/min-width above), so that same fixed
       px margin left the card badly off-center at smaller box sizes.
       Zeroed out so the parent's flexbox centering (align-items +
       justify-content above) positions it on both axes instead, correctly
       at any box size. */
    margin-left:0;
    /* pin the button to the same spot on every card regardless of how many
       lines the title/description wrap to -- without this, a 2-line title
       (e.g. "Grown Folks") or 2-line description pushes that card's button
       down further than its neighbors', so buttons in the same row don't
       line up. Column flex + margin-top:auto on the button's wrapper below
       keeps the button pinned to the card's bottom edge either way. */
    display:flex;
    flex-direction:column;
}
.menu-catboxes .catoverlay .text-center{
    /* was margin-top:auto (pins the button to the card's bottom edge) --
       that's what was leaving such a large gap on cards with shorter
       description text, since it claims ALL the leftover vertical space
       in the card for itself. Swapped for a small fixed gap instead, so
       the button sits close to the text on every card; it'll land at a
       very slightly different height card-to-card when a description
       wraps to 2 lines instead of 1, but that's a much smaller difference
       than the old gap. */
    margin-top:12px;
}
/* the shared .catoverlay button{margin-top:28px} below was tuned for the
   homepage, where the button follows directly in normal flow. Here it
   was stacking on TOP of the 12px above (and briefly, on top of the old
   margin-top:auto too) which is also why the button was hanging slightly
   below the white card's bottom edge, over the colored frame. */
.menu-catboxes .catoverlay button{
    margin-top:0;
}
/* .main-container:not(.home) h3 (above) left-aligns inner-page headings;
   same specificity, so this wins on source order and re-centers just the
   menu-page card titles, matching the homepage's identical boxes */
.menu-catboxes .catoverlay h3{
    text-align:center;
    /* the shared .catoverlay h3{padding-top:25%} below was calibrated for
       the homepage, where the button sits right after the text in normal
       flow. Now that this page's button is pinned to the card's bottom
       edge (.text-center{margin-top:auto} above), that same 25% just
       leaves a large, no-longer-useful gap above the title. Cut way down --
       Shaunie tried 8% first and asked for more, then 3%. */
    padding-top:2%;
}
.clearbox, .pinkbox{ flex-shrink:0; display:flex; align-items:center; justify-content:center; }
/* Shaunie (2026-10-26, follow-up): centering the .catoverlay card INSIDE
   each box (above) wasn't the whole fix -- on mobile, .clearbox/.pinkbox
   themselves (min(400px,92vw) wide) are narrower than their own parent
   row once stacked single-file, and that parent row -- a plain Bootstrap
   .row, unlike /menu/'s purpose-built .menu-catboxes flex container which
   already has justify-content:center -- defaults to flex-start, so each
   box sat flush against the LEFT edge with all the leftover space
   pushed to the right instead of split evenly. Centering the row itself
   fixes that; matches the same justify-content:center /menu/'s version
   already uses. */
.catboxes > .row{ justify-content:center; }
/* Shaunie (2026-10-26): the "View Full Menu" button right after these
   cards kept reading as sitting at the very bottom edge of the section
   with no breathing room, even after the hardcoded <br><br> above it was
   removed. Scoped to just this one button (not the OTHER goldbtn-long
   "View Full Menu" button down in Areas We Service, which is a separate,
   unrelated instance) so it doesn't pick up extra bottom spacing it
   didn't ask for. */
.category > .row:last-child .goldbtn-long{ margin-bottom:30px; }

/*** HOME-ONLY: CATEGORIES ***/
.category{
    height: auto;
    background:#fff;
}
/* Shaunie: this was a fixed clamp()'d height calibrated to the OLD flat-400px
   boxes stacking 6-high on mobile. Once .catboxes/.clearbox/.pinkbox became
   viewport-responsive (min(400px, 92vw)) for the overflow-x fix, the boxes
   got shorter on narrow phones but this section's height stayed just as
   tall, leaving a visible gap below the last card. height:auto lets the
   section size itself to its real content (heading + boxes + button row)
   at every width instead of guessing a number. */
/* Shaunie: the homepage was scrolling side-to-side on phones -- .catboxes
   and its .clearbox/.pinkbox children were flat/floored at 400px wide with
   no viewport-relative upper bound below that, so on any phone narrower
   than 400px (effectively all of them) this section forced the page wider
   than the screen. min(..., 92vw) caps each at 92% of the actual viewport
   instead whenever that's narrower than the old fixed value -- a no-op
   above ~435px wide (92vw already exceeds 400px there), so desktop and
   tablet render pixel-identical to before; only phones are affected.
   .catoverlay switches from a flat 335px to a percentage of its (now
   variable) parent instead, same 83.75% ratio as before (335/400) so it's
   still the exact same 335px at the unchanged 400px desktop size -- same
   technique already used for /menu/'s version of these same boxes below. */
.catboxes{
    width: clamp(min(400px, 92vw), calc(400px + 800 * ((100vw - 375px) / 1065)), 1200px);
    height: auto;
    background: url('/assets/images/pinkbg.webp') 0 0 no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    margin-bottom: clamp(0px, calc(0px + 25 * ((100vw - 375px) / 1065)), 25px);
}
.clearbox{ width:min(400px, 92vw); height:min(400px, 92vw); }
.pinkbox{ width:min(400px, 92vw); height:min(400px, 92vw); background:#8b3679; }
.catoverlay{
    width:83.75%;
    height:83.75%;
    margin-left: 0;
    margin-top: clamp(5px, calc(5px + 5 * ((100vw - 375px) / 1065)), 10px);
    background:#fff;
}
.catoverlay h3{ padding-top:8%; } /* Shaunie (2026-10-26): was 25% --
left a big blank gap above the title on the homepage's version of these
cards (same number /menu/'s version started at too, before it was cut
down to 2% there -- homepage differs slightly since its button follows
the text in normal flow instead of being pinned to the bottom, so this is
a first-pass estimate; let me know if it needs to come down further) */
.catoverlay p{
    width:75%;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size:.9em;
}
.catoverlay button{ margin-top:14px; } /* was 28px, trimmed along with the h3 change above */

/*** HOME-ONLY: REVIEWS ***/
#reviews{
    min-height: clamp(545px, calc(545px + 131 * ((100vw - 375px) / 1065)), 676px);
    border-top:1px solid #fff;
    background: url('/assets/images/pinkbg.webp') 0 0 no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    padding-bottom: clamp(20px, calc(20px + 20 * ((100vw - 375px) / 1065)), 40px);
}
@media only screen and (min-width:1025px){
    #reviews h2{ margin-top:32px; }
}
#reviews .overlay{
    min-height: clamp(495px, calc(495px + 125 * ((100vw - 375px) / 1065)), 620px);
    width:100%;
    margin-top: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1065)), 24px);
    margin-bottom: clamp(0px, calc(0px + 16 * ((100vw - 375px) / 1065)), 16px);
    padding-bottom: 20px;
    background: url('/assets/images/fadedlogo.webp') no-repeat 20% 40% / 150px 130px,
                url('/assets/images/quotationmarks.webp') no-repeat 95% 48% / 75px 69px, #fff;
}
@media only screen and (min-width:1025px){
    #reviews .overlay{
        background: url('/assets/images/fadedlogo.webp') no-repeat 15% 50% / 152px 132px,
                    url('/assets/images/quotationmarks.webp') no-repeat 80% 40% / 125px 115px, #fff;
    }
}
#reviews p{
    width: clamp(40%, calc(60% - 20 * ((100vw - 375px) / 1065)), 60%);
    margin-right:auto;
    margin-left:auto;
    margin-bottom: clamp(0px, calc(0px + 32 * ((100vw - 375px) / 1065)), 32px);
}
#reviews .accent{
    width:200px;
    height:30px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
}
#reviews button{ margin-top:20px; } /* Shaunie (2026-10-26): was 75px -- combined
with .slick-slider's own 40px bottom margin below, that left a big blank
gap between the review carousel's dots and the "View All Reviews" button */

/*** HOME-ONLY: SOCIAL ***/
#social{ height: clamp(800px, calc(900px - 100 * ((100vw - 375px) / 1065)), 900px); }
#social p{
    width: clamp(30%, calc(80% - 50 * ((100vw - 375px) / 1065)), 80%);
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1065)), 30px);
}
#socialimages{ float:left; }
#socialbox{
    width: clamp(355px, calc(355px + 205 * ((100vw - 375px) / 1065)), 560px);
    height: clamp(310px, calc(310px + 183 * ((100vw - 375px) / 1065)), 493px);
    background: url('/assets/images/socialbg.webp') no-repeat 100% 0% / 360px 315px;
    background-attachment:fixed;
    background-position:center;
    background-repeat:no-repeat;
    margin-top:20px;
    margin-right:20px;
}
@media only screen and (min-width:1025px){
    #socialbox{
        background: url('/assets/images/socialbg.webp') no-repeat 100% 0% / 680px 578px;
        background-position:right;
        margin-top:2px;
        margin-right:15px;
        margin-left:10px;
        margin-bottom:30px;
        border-top:10px solid #fff;
    }
}
#socialbox .content{
    width:100%;
    height:300px;
    margin:auto;
    text-align:center;
}
@media only screen and (min-width:1025px){
    /* fixed-width overlay content box only on desktop -- mobile stays fluid at 100% */
    #socialbox .content{ width:420px; height:420.75px; margin-top:5%; }
}
#socialbox .overlay{
    width:330px;
    height:290px;
    background:#fff;
    margin-left:3px;
    border:5px solid transparent;
    border-image: url('/assets/images/pinkbg.webp') 25% stretch;
}
@media only screen and (min-width:1025px){
    #socialbox .overlay{
        width:530px;
        height:470px;
        padding-top:15px;
        margin-right:15px;
        margin-left:0;
        background: url('/assets/images/fadedlogo.webp') no-repeat 95% 95% / 250px 217px, #fff;
    }
}
.sociallabel{ width:100%; text-align:center; font-size:.9em; font-weight:500; }
.margintop{ margin-top: clamp(25px, calc(25px + 47 * ((100vw - 375px) / 1065)), 72px); }
.socialicon-container{ width:200px; height:90px; margin-left:auto; margin-right:auto; }
.socialicon{
    width: clamp(85px, calc(85px + 0 * ((100vw - 375px) / 1065)), 85px);
    height: clamp(85px, calc(85px + 10 * ((100vw - 375px) / 1065)), 95px);
    margin-left:10px;
    float:left;
}
.socialicon img{ margin-top:25%; }
/* .socialimages only ever had a fixed height:150px while its two children float
   and run up to 243px tall -- floats don't expand a fixed-height parent, so the
   next .socialimages row started before the first had visually finished,
   painting over it and making the top row look cut in half. Clearfix instead
   of a fixed height, so the row always wraps its actual (fluid) content. */
.socialimages{ width:100%; padding-left:25px; }
.socialimages::after{ content:''; display:table; clear:both; }
#socialbox1, #socialbox2, #socialbox3, #socialbox4{
    width: clamp(150px, calc(150px + 130 * ((100vw - 375px) / 1065)), 280px);
    height: clamp(130px, calc(130px + 113 * ((100vw - 375px) / 1065)), 243px);
    border:1px solid #8b3679;
    margin: clamp(3px, calc(10px - 7 * ((100vw - 375px) / 1065)), 10px);
    float:left;
}
#socialbox1{ background: url('/assets/images/social1.webp') no-repeat 0 0 / 100% 100%, url('/assets/images/clear.webp') no-repeat 0 0 / 100% 100%; }
#socialbox2{ background: url('/assets/images/social2.webp') no-repeat 0 0 / 100% 100%, url('/assets/images/clear.webp') no-repeat 0 0 / 100% 100%; }
#socialbox3{ background: url('/assets/images/social3.webp') no-repeat 0 0 / 100% 100%, url('/assets/images/clear.webp') no-repeat 0 0 / 100% 100%; }
#socialbox4{ background: url('/assets/images/social4.webp') no-repeat 0 0 / 100% 100%, url('/assets/images/clear.webp') no-repeat 0 0 / 100% 100%; }

/*** HOME-ONLY: AREAS OF SERVICE ***/
#areas{
    height: clamp(445px, calc(720px - 275 * ((100vw - 375px) / 1065)), 720px);
    background: url('/assets/images/fadedlogo.webp') no-repeat 5% 30% / 150px 130px, #fff;
}
@media only screen and (min-width:1025px){
    #areas{ background: url('/assets/images/fadedlogo.webp') no-repeat 20% 35% / 250px 217px, #fff; }
}
#areas p{
    width: clamp(50%, calc(80% - 30 * ((100vw - 375px) / 1065)), 80%);
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    margin-bottom: clamp(50px, calc(75px - 25 * ((100vw - 375px) / 1065)), 75px);
}

/*** HOME-ONLY: REVIEWS SLIDER (slick carousel)
     Flattened out of the SCSS-style nested selectors (&:hover, bare nested
     `path{}`/`p{}`/`cite{}`) that both source files had -- those aren't
     valid CSS outside the newer native-nesting spec, and aren't needed
     here; plain selectors are clearer and work everywhere. Also dropped
     the stray `font-family:Calibri` the desktop copy had on .quote --
     every other heading/body font on the site is Montserrat/Bodoni
     Moda/Oxygen, so Calibri there was a leftover slip, not intentional. ***/
.slider-content{
    margin:auto;
    padding:20px;
    width:90%;
    max-width:1500px;
    min-width:300px;
    background:transparent;
}
@media only screen and (min-width:1025px){
    .slider-content{ max-width:80%; max-height:200px; }
}
.slick-slider{ margin: clamp(30px, calc(30px + 0 * ((100vw - 375px) / 1065)), 30px) auto 15px; } /* bottom was 40px, see #reviews button comment above */
/* Two real bugs here, both confirmed live:
   1. The small duplicate arrow image Shaunie flagged wasn't actually a
      stray element -- it's slick-theme.css's OWN default `:before`
      content (the vendor file's base, genuinely unmodified; it just
      happens to load after main.css in both index.php's and every other
      page's <head>, so its non-!important rule was winning). Already
      fixed with `content:none !important` below.
   2. The circle/oval Shaunie saw around each arrow on her Mac never
      showed up in this project's own Linux-based browser testing --
      confirmed live it's native OS button chrome: these are <button>
      elements and nothing anywhere (main.css or slick-theme.css) resets
      `appearance`, only background/border/outline, which is a different
      property. Linux Chromium renders an unstyled `appearance:button`
      as essentially invisible; macOS Safari/Chrome render a visible
      rounded/oval native button background at this size -- which is
      exactly the "small arrow" Shaunie was circling. `appearance:none`
      strips that native chrome on every platform.
   Vertical centering also switched from slick-theme.css's own
   top:-10%/margin-top:-10px default (and this file's old, unrelated
   margin-top:92px desktop override) to a standard top:50% +
   translateY(-50%) centering pattern -- confirmed live (measuring the
   arrow's and the active slide's quote text's actual center Y) that the
   old combo left them off-center by a viewport-dependent amount, while
   this pattern centers them exactly regardless of viewport or how much
   text a given review happens to wrap to. All forced with !important
   since slick-theme.css's own (non-important) top/margin-top rules for
   this same selector load AFTER this file and would otherwise win. */
.slick-prev, .slick-next{
    -webkit-appearance:none;
    appearance:none;
    color:#fff;
    opacity:1;
    height:40px;
    width:40px;
    top:50% !important;
    margin-top:0 !important;
    transform:translateY(-50%) !important;
}
.slick-prev path, .slick-next path{ fill: rgba(0,0,0,0.4); }
.slick-prev:hover path, .slick-next:hover path{ fill:#000; }
.slick-prev{ left:-35px; }
.slick-next{ right:0px; }
.slick-prev:before, .slick-next:before{ content:none !important; }
.slick-dots li button:before{
    color: rgba(255,255,255,0.4);
    opacity:1;
    font-size:8px;
    margin-top:40px;
}
@media only screen and (min-width:1025px){
    .slick-dots li button:before{ margin-top:0; }
}
.slick-dots li.slick-active button:before{ color:#fff; }
.quote-container{
    min-height:200px;
    color:#666;
    font-size:36px;
    margin:0;
    position:relative;
}
.quote-container:hover{ cursor:grab; }
.dragging .quote-container{ cursor:grabbing; }
.quote-container .quote{
    position:relative;
    z-index:600;
    margin:0;
    /* matches Featured Cheesecake's paragraph font-size (16px, confirmed
       live via getComputedStyle) -- a literal px, NOT 1em: this element's
       own parent, .quote-container, has its own hardcoded font-size:36px
       a few lines up, so "1em" here resolved against THAT (rendering at
       36px, confirmed live -- the bug Shaunie caught) instead of the
       16px actually intended. */
    font-size:16px;
    font-style:italic;
    /* already matches #featured p's inherited default line-height (1.5x
       font-size) -- kept explicit since removing it entirely would be a
       bigger, unverified change for the same end result */
    line-height:1.5 !important;
    font-family: Montserrat, sans-serif;
    color:#000;
    text-align:center;
    padding-top:0px;
}
.quote-container .quote p{
    position:relative;
    margin-bottom:20px;
}
.quote-container .quote p:first-child:before{
    content:'\201C';
    color: rgba(255,255,255,0.44);
    font-size:7em;
    font-weight:600;
    opacity:1;
    position:absolute;
    top:-.4em;
    left:-.2em;
    text-shadow:none;
    z-index:-10;
}
.quote-container .quote cite{
    display:block;
    font-size: clamp(12.8px, calc(12.8px + 1.6 * ((100vw - 375px) / 1065)), 14.4px);
    line-height:1.5;
    text-align:center;
    width:100%;
}
.quote-container .quote cite span{
    font-size: clamp(12.8px, calc(12.8px + 1.6 * ((100vw - 375px) / 1065)), 14.4px);
    line-height:1.5;
    font-style:normal;
    letter-spacing:1px;
    text-transform:uppercase;
}

/*** COOKIE DISCLAIMER BANNER (small centered bottom-anchored card, modeled on
     Sacred Executive Protection's .cookie-banner pattern, re-skinned in a
     softer SeanCee palette -- a thin blush border + brand-pink accents on a
     light card, rather than a solid dark-pink fill, per user feedback that
     the old solid-pink fill read as too harsh) ***/
.cookie-banner{
    position:fixed;
    left:20px;
    right:20px;
    bottom:-220px;
    z-index:1001;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    max-width:650px;
    margin:0 auto;
    padding:18px 22px;
    background:#fff9fb;
    border:1px solid #d9a9c4;
    border-radius:6px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    font-size:14px;
    line-height:1.5;
    color:#5c4350;
    transition:bottom .5s ease;
}
.cookie-banner.show{ bottom:20px; }
.cookie-banner p{ margin:0; flex:1 1 320px; }
.cookie-banner a{ color:#8b3679; text-decoration:underline; }
.cookie-banner-actions{ flex:0 0 auto; }
.cookie-banner-actions button{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#fff;
    background:#8b3679;
    border:none;
    border-radius:999px;
    padding:10px 22px;
    cursor:pointer;
}
.cookie-banner-actions button:hover{ opacity:.85; }
@media only screen and (max-width:600px){
    .cookie-banner{
        left:10px;
        right:10px;
        flex-direction:column;
        align-items:stretch;
        text-align:center;
    }
    .cookie-banner p{ flex:0 1 auto; }
    .cookie-banner-actions button{ width:100%; }
}

/*** "JOIN OUR EMAIL LIST" POPUP FORM ***/
.open-btn{
    min-width: clamp(220px, calc(220px + 20 * ((100vw - 375px) / 1065)), 240px);
    height: clamp(48px, calc(48px + 0 * ((100vw - 375px) / 1065)), 48px);
    background: url('/assets/images/goldbackground.webp') no-repeat 0 0 / 100% 100px;
    font-size:.9em;
    text-align:center;
    color:#8b3679;
    border:1px solid transparent;
    margin:20px;
    text-transform:uppercase;
    padding:12px 20px;
    cursor:pointer;
    border-radius:999px;
}
@media (hover:hover) and (pointer:fine){
    .open-btn:hover{ opacity:.8; color:#316484; background-color:transparent; }
}
@media only screen and (min-width:1025px){
    .open-btn{ box-shadow:3px 2px #ccc; }
}
/* sleeker rounded/floating card (replacing the old fixed 552px-tall box
   with an 8px solid border) merging SeanCee's existing fields/copy with a
   cleaner presentation modeled on Sacred Executive Protection's sep-dialog
   popups. openPopup()/closePopup() in popup.js still just toggle
   style.display -- they now also toggle this .show class alongside it, so
   this is purely a visual upgrade; the 30-second auto-fire timer and the
   "already shown" localStorage guard in popup.js are untouched. */
.popup-overlay{
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,.6);
    z-index:1001;
    opacity:0;
    transition: opacity .25s ease;
}
.popup-overlay.show{ opacity:1; }
.popup-content{
    width: min(90vw, 380px);
    max-height:85vh;
    overflow-y:auto;
    box-sizing:border-box;
    padding: clamp(24px, 5vw, 32px);
    background:#fff;
    margin:8% auto;
    position:relative;
    border-radius:16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    opacity:0;
    transform: translateY(14px) scale(.98);
    transition: opacity .25s ease, transform .25s ease;
}
.popup-overlay.show .popup-content{ opacity:1; transform:translateY(0) scale(1); }
.close-btn{
    width:24px;
    height:24px;
    position:absolute;
    top:16px;
    right:16px;
    background: url('/assets/images/close.webp') no-repeat 0 0 / 100% 100%, transparent;
    cursor:pointer;
}
.close-btn:hover{ opacity:.7; }
.check-box{
    display:flex;
    align-items:flex-start;
    gap:8px;
    width:100%;
    min-height:auto;
    padding:0 !important;
    margin-top:8px;
}
.check-box p{ width:auto; flex:1; margin:0; font-size:.8em; line-height:1.4; }
.popup-content input[type="text"],
.popup-content input[type="email"],
.popup-content input[type="date"]{
    /* input[type="date"] added for the Grown Folks age-gate's date-of-birth
       field -- same shared .popup-content used by the email-signup popup,
       no date input existed in it before */
    width:100%;
    box-sizing:border-box;
    padding:12px;
    margin:8px 0;
    border:1px solid #ddd;
    border-radius:8px;
    font-family:inherit;
    font-size:1em;
}
.popup-content input[type="checkbox"]{
    width:20px;
    height:20px;
    margin:2px 0 0;
    flex-shrink:0;
}
.popup-hp{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}
.popup-content button{
    width:100%;
    height: clamp(44px, calc(44px + 4 * ((100vw - 375px) / 1065)), 48px);
    background: url('/assets/images/goldbackground.webp') no-repeat 0 0 / 100% 100px;
    font-size:.9em;
    text-align:center;
    color:#8b3679;
    border:1px solid transparent;
    border-radius:999px;
    margin-top:16px;
    text-transform:uppercase;
    cursor:pointer;
}
.popup-content button:hover{ opacity:.85; }
.popup-content button:disabled{ opacity:.5; cursor:default; }
.popup-status{
    margin-top:10px;
    text-align:center;
    font-size:.85em;
    min-height:1.2em;
}
.popup-status.success{ color:#2e7d32; }
.popup-status.error{ color:#c62828; }
/* extra breathing room between the Confirm button and the "No thanks,
   take me back to the menu" link below it on the Grown Folks age-gate
   popup -- scoped to #ageGateOverlay only, so it doesn't affect the
   shared .popup-content used by the email-signup popup (which has no
   link in that spot). */
#ageGateOverlay p.text-center{ margin-top:16px; }

/*** FORM POPUP (the smaller "Schedule"/"Request" style popup form, same CSS used by
     both viewport sizes -- form-popup/form-container are positioned differently only
     because mobile centers it and desktop anchors it near the bottom-right) ***/
.form-popup{
    display:none;
    position:fixed;
    bottom:15%;
    border:5px solid #8b3679;
    z-index:1000;
}
@media only screen and (min-width:1025px){
    .form-popup{ bottom:20%; right:37%; }
}
.form-container{
    max-width: clamp(400px, calc(450px - 50 * ((100vw - 375px) / 1065)), 450px);
    min-height:555px;
    padding:10px;
    background-color:#fff;
}
.form-container input[type=text],
.form-container input[type=password]{
    width:100%;
    padding:15px;
    margin:5px 0 22px 0;
    border:none;
    background:#f1f1f1;
}
.form-container input[type="checkbox"]{
    width:25px;
    height:25px;
    border:none;
    background:#f1f1f1;
}
.form-container input[type=text]:focus,
.form-container input[type=password]:focus{
    background-color:#ddd;
    outline:none;
}
.form-container .btngold{
    min-width:180px;
    height:40px;
    background: url('/assets/images/goldbackground.webp') no-repeat 0 0 / 100% 100px;
    font-size:.9em;
    text-align:center;
    color:#8b3679;
    border:1px solid transparent;
    margin-top:8px;
    text-transform:uppercase;
    padding:16px 20px;
    margin-left:auto;
    margin-right:auto;
    border-radius:999px;
}
.form-container .btngold:hover{ opacity:1; }
.form-container .cancel{
    background-color:transparent;
    width:32px;
    height:32px;
    float:right;
    background: url('/assets/images/close.webp') no-repeat 0 0 / 100% 100%;
}

/*** ANIMATIONS ***/
@keyframes fadeIn{
    from{ opacity:0; transform:translateY(-20px); }
    to{ opacity:1; transform:translateY(0); }
}
@-webkit-keyframes gradient{
    0%{ background-position:5% 0%; }
    50%{ background-position:96% 100%; }
    100%{ background-position:5% 0%; }
}
@-moz-keyframes gradient{
    0%{ background-position:5% 0%; }
    50%{ background-position:96% 100%; }
    100%{ background-position:5% 0%; }
}
@keyframes gradient{
    0%{ background-position:5% 0%; }
    50%{ background-position:96% 100%; }
    100%{ background-position:5% 0%; }
}

/*** MENU PRODUCT GRID (menu/*.php, rendered by product-grid.php from the
     live client-products catalog). Card look reuses the same soft
     blush-border-on-light-card language already established for
     .cookie-banner -- #fff9fb background, #d9a9c4 border, #8b3679 brand
     pink for price/accent text -- so this reads as the same site rather
     than a bolted-on admin-tool look. ***/
.product-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(240px, calc(240px + 40 * ((100vw - 375px) / 1065)), 280px), 1fr));
    gap: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 1065)), 24px);
    margin-top:20px;
    margin-bottom:30px;
}
.product-card{
    display:flex;
    flex-direction:column;
    background:#fff9fb;
    border:1px solid #d9a9c4;
    border-radius:6px;
    box-shadow:0 6px 18px rgba(0,0,0,.1);
    overflow:hidden;
}
.product-card-image{
    width:100%;
    aspect-ratio:1/1;
    background:#f3dbe9;
    overflow:hidden;
}
.product-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.product-card-image-placeholder{
    background:#f3dbe9;
    display:flex;
    align-items:center;
    justify-content:center;
}
.product-card-image-placeholder img{
    width:60%;
    height:60%;
    object-fit:contain;
    opacity:.6;
}
.product-card-body{
    padding: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1065)), 18px);
    flex:1;
    display:flex;
    flex-direction:column;
}
.product-card-body h3{
    font-family: "Bodoni Moda", serif;
    color:#8b3679;
    font-size: clamp(18px, calc(18px + 2 * ((100vw - 375px) / 1065)), 20px);
    margin:0 0 6px;
}
.product-status-badge{
    display:inline-block;
    align-self:flex-start;
    background:#8b3679;
    color:#fff;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.05em;
    padding:3px 9px;
    border-radius:4px;
    margin-bottom:8px;
}
.product-status-badge-sm{
    padding:1px 6px;
    font-size:10px;
    margin-left:6px;
}
.product-card-description{
    color:#5c4350;
    font-size: clamp(13.6px, calc(13.6px + 1.6 * ((100vw - 375px) / 1065)), 15.2px);
    line-height:1.5;
    margin:0 0 10px;
}
.product-card-price{
    color:#8b3679;
    font-weight:700;
    font-size: clamp(17.6px, calc(17.6px + 1.6 * ((100vw - 375px) / 1065)), 19.2px);
    margin:0 0 10px;
}
.product-card-sizes{
    list-style:none;
    margin:0 0 10px;
    padding:0;
    border-top:1px solid #d9a9c4;
}
.product-card-sizes li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:6px 0;
    border-bottom:1px dashed #e9c9db;
    font-size: clamp(13.6px, calc(13.6px + 1.6 * ((100vw - 375px) / 1065)), 15.2px);
}
.product-card-sizes li:last-child{ border-bottom:none; }
.product-card-size-label{ color:#5c4350; font-weight:600; }
.product-card-size-price{ color:#8b3679; font-weight:700; margin-left:auto; padding-right:6px; }
.product-card-options,
.product-card-addons{
    color:#5c4350;
    font-size: clamp(12.8px, calc(12.8px + 1.6 * ((100vw - 375px) / 1065)), 14.4px);
    line-height:1.5;
    margin:0 0 6px;
}
.product-card-options strong,
.product-card-addons strong{ color:#8b3679; }
.product-card-addbag{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:auto;
    padding-top:10px;
}
.add-to-bag-size{
    flex:1 1 100%;
    min-width:0;
    border:1px solid #d9a9c4;
    border-radius:4px;
    background:#fff;
    color:#5c4350;
    font-size: clamp(12.8px, calc(12.8px + 1.6 * ((100vw - 375px) / 1065)), 14.4px);
    padding:6px 8px;
}
.add-to-bag-qty{
    flex:0 0 56px;
    min-width:0;
    border:1px solid #d9a9c4;
    border-radius:4px;
    background:#fff;
    color:#5c4350;
    font-size: clamp(12.8px, calc(12.8px + 1.6 * ((100vw - 375px) / 1065)), 14.4px);
    padding:6px 4px;
    text-align:center;
}
.add-to-bag-btn{
    flex:1 1 auto;
    flex-shrink:0;
    background:#8b3679;
    color:#fff;
    border:1px solid #8b3679;
    border-radius:999px;
    text-transform:uppercase;
    letter-spacing:.03em;
    font-size: clamp(11.2px, calc(11.2px + 1.6 * ((100vw - 375px) / 1065)), 12.8px);
    padding:8px 14px;
    cursor:pointer;
}
.add-to-bag-btn:disabled{ opacity:.6; cursor:default; }
@media (hover:hover) and (pointer:fine){
    .add-to-bag-btn:hover:not(:disabled){ opacity:.85; }
}

/*** CONTACT PAGE FORM (full-page form on /contact/ -- not a popup, so it
     doesn't use .popup-content's modal sizing, but reuses the same
     visual language: rounded gray-bordered inputs, the .check-box terms
     row, and the hidden .popup-hp honeypot, both of which are already
     generic/global rather than scoped to the popup). ***/
.contact-page-form{
    max-width:480px;
    margin:16px auto 0;
}
.contact-page-form label{
    display:block;
    font-weight:600;
    margin:14px 0 4px;
    font-size:.9em;
}
.contact-page-form .req{ color:#c62828; }
.contact-page-form input[type="text"],
.contact-page-form input[type="email"],
.contact-page-form input[type="tel"],
.contact-page-form input[type="date"],
.contact-page-form select,
.contact-page-form textarea{
    width:100%;
    box-sizing:border-box;
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
    font-family:inherit;
    font-size:1em;
    background:#fff;
    color:#333;
}
.contact-page-form textarea{
    min-height:120px;
    resize:vertical;
}
.contact-page-form input[type="checkbox"]{
    width:20px;
    height:20px;
    margin:2px 0 0;
    flex-shrink:0;
}
.contact-page-form .req-note{
    font-size:.8em;
    color:#666;
    margin-top:10px;
}
.contact-page-form button[type="submit"]{
    width:100%;
    height: clamp(44px, calc(44px + 4 * ((100vw - 375px) / 1065)), 48px);
    background: url('/assets/images/goldbackground.webp') no-repeat 0 0 / 100% 100px;
    font-size:.9em;
    text-align:center;
    color:#8b3679;
    border:1px solid transparent;
    border-radius:999px;
    margin-top:12px;
    text-transform:uppercase;
    cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
    .contact-page-form button[type="submit"]:hover{ opacity:.85; }
}
.contact-page-form button[type="submit"]:disabled{ opacity:.5; cursor:default; }
.contact-page-form .contact-form-status{
    margin-top:12px;
    text-align:center;
    font-size:.9em;
    min-height:1.2em;
}
.contact-page-form .contact-form-status.success{ color:#2e7d32; }
.contact-page-form .contact-form-status.error{ color:#c62828; }

/*** CATERING ORDER FORM (/catering/request.php) -- builds on the
     .contact-page-form base styling (full-page inputs/select/textarea,
     terms check-box, status message) and adds the repeating item-row UI
     specific to this form. ***/
a.pinkbtn-xlong{ text-decoration:none; display:inline-block; }
.catering-form{
    max-width:760px;
}
.contact-form{
    max-width:700px;
}
.order-form{
    max-width:760px;
}

/*** ORDER REVIEW (/order/ -- cart review above the delivery-info form,
     same card look as .product-card so it reads as part of the same
     site rather than a bolted-on checkout widget). ***/
.order-items{
    margin-top:20px;
    margin-bottom:10px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.order-item{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff9fb;
    border:1px solid #d9a9c4;
    border-radius:6px;
    padding:10px 14px;
}
.order-item-image{
    width:64px;
    height:64px;
    flex-shrink:0;
    border-radius:4px;
    overflow:hidden;
    background:#f3dbe9;
}
.order-item-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.order-item-body{
    flex:1;
    min-width:0;
}
.order-item-body h3{
    font-family: "Bodoni Moda", serif;
    color:#8b3679;
    font-size:16px;
    margin:0 0 4px;
}
.order-item-size{
    color:#5c4350;
    font-weight:400;
    font-size:13px;
}
.order-item-price{
    color:#5c4350;
    font-size:13px;
    margin:0 0 8px;
}
.order-item-controls{
    display:flex;
    align-items:center;
    gap:12px;
}
.order-item-qty-label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:#5c4350;
}
.order-item-qty{
    width:56px;
    border:1px solid #d9a9c4;
    border-radius:4px;
    padding:4px;
    text-align:center;
}
.order-item-remove{
    background:none;
    border:none;
    color:#c62828;
    font-size:13px;
    text-decoration:underline;
    cursor:pointer;
    padding:0;
}
.order-item-total{
    flex-shrink:0;
    color:#8b3679;
    font-weight:700;
    font-size:16px;
    min-width:70px;
    text-align:right;
}
.order-subtotal{
    text-align:right;
    font-size:18px;
    font-weight:700;
    color:#5c4350;
    border-top:1px solid #d9a9c4;
    padding-top:10px;
    margin-bottom:24px;
}
.order-subtotal span{ color:#8b3679; }
.form-2col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 24px;
}
.form-2col .form-field{
    min-width:0;
}
@media only screen and (max-width:700px){
    .form-2col{ grid-template-columns:1fr; }
}
.catering-section-title{
    color:#8b3679;
    font-size:1.1em;
    margin:24px 0 4px;
    border-bottom:1px solid #eee;
    padding-bottom:4px;
}
.catering-item-row{
    position:relative;
    border:1px solid #eee;
    border-radius:8px;
    padding:16px;
    margin-top:14px;
    background:#fafafa;
}
.catering-remove-item{
    position:absolute;
    top:10px;
    right:10px;
    width:28px;
    height:28px;
    border-radius:50%;
    border:1px solid #ddd;
    background:#fff;
    color:#c62828;
    font-size:1.1em;
    line-height:1;
    cursor:pointer;
}
.catering-remove-item:hover{ background:#fde8e8; }
.catering-remove-item:disabled{ opacity:.3; cursor:default; }
.catering-line-total{
    margin-top:10px;
    font-weight:600;
    color:#8b3679;
    text-align:right;
}
.catering-add-item{
    width:100%;
    margin-top:14px;
    padding:10px;
    border:1px dashed #8b3679;
    border-radius:8px;
    background:#fff;
    color:#8b3679;
    cursor:pointer;
    font-size:.9em;
    text-transform:uppercase;
}
.catering-add-item:hover{ background:#f6eef4; }
.catering-add-item:disabled{ opacity:.4; cursor:default; }
.catering-subtotal{
    margin-top:18px;
    font-size:1.1em;
    font-weight:600;
    color:#8b3679;
    text-align:right;
}

/* ---------------------------------------------------------------------
   Specials page (/about/specials.php) -- two discount cards: a standing
   15%-off code for new customers (just displayed, no form) and a 20%-off
   code for joining the email list (inline form, posts to submit-form.php
   with formType=emailDiscount). Scoped to #specials so nothing here can
   leak into any other page's cards/boxes/forms.
   --------------------------------------------------------------------- */
#specials .discount-cards{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    margin-top:20px;
    align-items:flex-start;
}
#specials .discount-card{
    flex:1 1 320px;
    min-width:280px;
    background:#fff;
    border:1px solid #e8d9e4;
    border-radius:16px;
    padding:28px 24px;
    box-shadow:0 2px 10px rgba(139,54,121,.08);
}
#specials .discount-card h2{
    color:#8b3679;
    font-size:1.3em;
    margin-top:0;
    margin-bottom:4px;
}
#specials .discount-card .discount-pill{
    display:inline-block;
    background:#8b3679;
    color:#fff;
    font-size:.85em;
    text-transform:uppercase;
    letter-spacing:.03em;
    border-radius:999px;
    padding:4px 14px;
    margin-bottom:12px;
}
#specials .discount-card p{ margin-bottom:12px; }
#specials .discount-code{
    display:block;
    background:#faf3f8;
    border:1px dashed #8b3679;
    border-radius:10px;
    text-align:center;
    color:#8b3679;
    font-size:1.2em;
    font-weight:bold;
    letter-spacing:.05em;
    padding:12px;
    margin-bottom:14px;
    word-break:break-all;
}
#specials .discount-card form{ margin-top:4px; }
#specials .discount-card input[type="text"],
#specials .discount-card input[type="email"]{
    width:100%;
    box-sizing:border-box;
    margin-bottom:10px;
}
#specials .discount-card .btngold{
    width:100%;
    height: clamp(44px, calc(44px + 4 * ((100vw - 375px) / 1065)), 48px);
    background: url('/assets/images/goldbackground.webp') no-repeat 0 0 / 100% 100px;
    font-size:.9em;
    text-align:center;
    color:#8b3679;
    border:1px solid transparent;
    border-radius:999px;
    text-transform:uppercase;
    cursor:pointer;
}
@media (hover:hover) and (pointer:fine){
    #specials .discount-card .btngold:hover{ opacity:.85; }
}
#specials .discount-card .btngold:disabled{ opacity:.5; cursor:default; }
#specials .discount-result{
    margin-top:12px;
    font-size:.95em;
}
#specials .discount-result.error{ color:#b23b3b; }
#specials .discount-result.success{ color:#2f7a3d; }

/* ---------------------------------------------------------------------
   Customer Reviews page (/about/reviews.php) -- static grid of Google
   review testimonial cards + a "Leave a Google Review" button. Scoped to
   #customerReviews (NOT #reviews -- that id already carries the
   homepage's pink-hero/slider styling and would collide badly here).
   --------------------------------------------------------------------- */
#customerReviews .review-intro{
    max-width:700px;
    margin:0 auto 24px;
    text-align:center;
}
#customerReviews .review-cta{
    text-align:center;
    margin-bottom:32px;
}
/* "Leave a Google Review" is longer than .pinkbtn-long's other use
   ("Continue to Payment") -- same wrapping risk as .pinkbtn-xlong
   elsewhere, so letting this one size to its own content rather than
   the shared fixed 220px width. */
#customerReviews .review-cta .pinkbtn-long{
    width:auto;
    white-space:nowrap;
    padding-left:24px;
    padding-right:24px;
}
#customerReviews .review-grid{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
    justify-content:center;
}
#customerReviews .review-card{
    flex:1 1 280px;
    max-width:340px;
    background:#fff;
    border:1px solid #e8d9e4;
    border-radius:16px;
    padding:24px;
    box-shadow:0 2px 10px rgba(139,54,121,.08);
    display:flex;
    flex-direction:column;
}
#customerReviews .review-stars{
    color:#d7b551;
    font-size:1.1em;
    letter-spacing:2px;
    margin-bottom:12px;
}
#customerReviews .review-card blockquote{
    margin:0 0 16px;
    font-style:italic;
    color:#333;
    flex-grow:1;
}
#customerReviews .review-card cite{
    display:block;
    font-style:normal;
    font-weight:bold;
    color:#8b3679;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:.85em;
}