/* Giraffe navigation: compact two-row desktop header. */
@media(min-width:768px){
body>header{display:block;width:100%;padding:0;background:#fff;gap:0}
body>header .header1,body>header .header2,body>header .navwrap{display:block;width:100%}
body>header .h1in,body>header .top{display:grid;grid-template-columns:minmax(120px,1fr) minmax(240px,320px) auto;max-width:1440px!important;height:56px;min-height:56px;margin:0 auto;padding:0 32px!important;gap:16px;align-items:center}
body>header .logo{font-size:31px;line-height:1;letter-spacing:-1.5px;justify-self:start}
body>header .search{grid-column:auto;grid-row:auto;justify-self:end;display:flex;align-items:center;width:100%;max-width:320px;height:44px;padding:0 14px;border-radius:7px;font-size:12px;white-space:nowrap;overflow:hidden}
body>header .actions{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px}
body>header .pill{display:inline-flex;align-items:center;justify-content:center;padding:9px 17px;border-radius:24px;font-size:12px;line-height:18px}
body>header .nav{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:34px;max-width:1440px!important;width:100%;height:52px;margin:0 auto;padding:0 32px!important;font-size:13px;font-weight:600;white-space:nowrap}
body>header .nav>a{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;white-space:nowrap}
body>header .nav>a:hover{color:#b37e91}
body>header .nav>a:focus-visible{outline:2px solid #b37e91;outline-offset:3px;border-radius:4px}
}
@media(min-width:768px) and (max-width:1000px){body>header .nav{gap:20px;font-size:12px;overflow-x:auto}body>header .h1in,body>header .top{grid-template-columns:minmax(80px,1fr) minmax(200px,280px) auto;gap:10px}body>header .actions{gap:8px}body>header .pill{padding:8px 12px}}

header .nav{position:relative;overflow:visible!important}header .menu-group{position:relative;align-self:stretch;display:flex;align-items:stretch}header .menu-trigger{border:0;background:transparent;color:#222;font:inherit;display:flex;align-items:center;gap:12px;padding:0 12px;cursor:pointer;white-space:nowrap}header .menu-trigger::after{content:"";width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg);margin-top:-4px}header .menu-group.is-open .menu-trigger{background:#eee}header .menu-panel{display:none;position:absolute;top:100%;left:0;width:260px;padding:16px 0;background:#fff;border:1px solid #eee;box-shadow:0 16px 28px #0002;z-index:100;white-space:normal}header .menu-group.is-open .menu-panel{display:block}header .menu-panel a{display:block;padding:16px 24px;color:#222;text-decoration:none;font-size:13px;line-height:20px}header .menu-panel a:hover,header .menu-panel a:focus-visible{background:#f3f3f3;color:#b37e91}header .menu-group:last-of-type .menu-panel{left:auto;right:0}

/* Match reference gutters on desktop; retain room for tablet navigation. */
@media(min-width:1100px){
 body>header .h1in,body>header .top,body>header .nav{
  width:85%;max-width:none!important;margin-left:auto;margin-right:auto;
  padding-left:0!important;padding-right:0!important;
 }
 body>header .menu-group:first-child .menu-trigger{padding-left:0}
}

/* Use the same desktop content edges throughout the storefront. */
@media(min-width:1100px){
 body>.hero,body>.layout,body>main#catalogContent,
 body>.section>.inner,body>footer>.foot,body>footer>.bottom{
  width:85%;max-width:none!important;margin-left:auto;margin-right:auto;
  padding-left:0!important;padding-right:0!important;
 }
 body>.section,body>footer{padding-left:0!important;padding-right:0!important}
}

/* Mega-menu panels share the navigation container's width and edges. */
header .mega-nav .menu-group{position:static}
header .mega-nav .menu-panel,header .mega-nav .menu-group:last-of-type .menu-panel{left:0;right:0;width:100%;padding:28px;box-sizing:border-box;border-radius:0 0 12px 12px;white-space:normal}
header .mega-nav .menu-group.is-open .menu-panel{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(200px,1.3fr) minmax(200px,1fr);gap:28px;align-items:start}
header .mega-nav .menu-panel h2{font-size:23px;line-height:1.25;margin:0 0 16px;letter-spacing:-.5px}
header .mega-nav .menu-panel h3{font-size:13px;line-height:1.5;margin:0 0 12px}
header .mega-nav .menu-panel a{padding:10px 0;font-size:13px;line-height:1.5;border-radius:4px}
header .mega-nav .mega-links{border-left:1px solid #eee;padding-left:28px}
header .mega-nav .mega-help{background:#fff2f8;border:1px solid #ffd6e9;border-radius:10px;padding:20px}
header .mega-nav .mega-help p{font-size:13px;line-height:1.6;color:#666;margin:10px 0}
header .mega-nav .mega-help a{font-weight:700;color:#b37e91}
@media(max-width:767px){header .mega-nav .menu-group.is-open .menu-panel{grid-template-columns:1fr;gap:18px;max-height:65vh;overflow-y:auto;padding:18px}header .mega-nav .mega-links{border-left:0;padding-left:0}}

/* Longer Giraffe category labels wrap on tablets without clipping mega menus. */
@media(min-width:768px) and (max-width:1000px){body>header .nav{flex-wrap:wrap;height:auto;min-height:52px;gap:0 12px}body>header .menu-trigger{padding:12px 6px;font-size:11px}body>header .menu-group{min-height:44px}}

/* Floating category bar; dropdowns remain outside the rounded surface. */
@media(min-width:768px){
html:root body>header :is(.header2,.navwrap){background:transparent!important;border:0!important}
html:root body>header .nav{box-sizing:border-box;width:92%;max-width:none!important;min-height:72px;height:auto;padding:0 28px!important;margin:16px auto 24px;border:0;border-radius:20px;background:#fff!important;box-shadow:0 8px 28px rgba(0,0,0,.12);gap:24px;flex-wrap:wrap;row-gap:0;color:#6b6862!important;font-size:14px;font-weight:400}
html:root body>header .menu-trigger{color:inherit;font-weight:inherit;padding:16px 10px;min-height:64px;border-radius:8px}
html:root body>header .menu-group:first-child .menu-trigger{padding-left:10px}
html:root body>header .nav>a{color:inherit}
}

/* Submenu thumbnails and backdrop, shared by every storefront page. */
.giraffe-menu-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.22);z-index:90;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
body.giraffe-menu-open .giraffe-menu-backdrop{opacity:1;visibility:visible;pointer-events:auto}
body.giraffe-menu-open>header{position:relative;z-index:100}
html:root body>header .mega-nav .menu-panel a.mega-item{display:flex;align-items:center;gap:12px;padding:9px 8px;min-height:48px;line-height:1.4}
.mega-item-image{display:block;flex:0 0 48px;width:48px;height:48px;object-fit:contain;background:#fff;border-radius:8px}
.mega-item span{min-width:0;overflow-wrap:anywhere}
.mega-nested{padding-left:20px}
@media(prefers-reduced-motion:reduce){.giraffe-menu-backdrop{transition:none}}

/* Mobile category bar: keep the existing logo, search and catalog untouched. */
@media(max-width:767px){
 html:root body>header :is(.header2,.navwrap){background:transparent!important;border:0!important}
 html:root body>header .nav{box-sizing:border-box;position:relative;width:calc(100% - 24px)!important;margin:12px auto 18px!important;padding:6px 10px!important;min-height:56px;height:auto!important;border:0!important;border-radius:18px;background:#fff!important;box-shadow:0 7px 24px rgba(0,0,0,.12);display:flex;flex-flow:row wrap;align-items:center;justify-content:space-between;gap:0 4px;overflow:visible!important}
 html:root body>header .nav .menu-group{position:static;min-width:0;align-self:stretch}
 html:root body>header .nav .menu-trigger{padding:10px 6px;min-height:44px;gap:6px;font-size:12px;line-height:1.3;border-radius:10px}
 html:root body>header .mega-nav .menu-panel{left:0;right:0;width:100%;box-sizing:border-box;border:0;border-radius:0 0 18px 18px;max-height:65dvh;overflow-y:auto}
}

/* Open navigation is one continuous surface, with one outer shadow. */
html:root body.giraffe-menu-open>header .nav{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;box-shadow:none!important;background:var(--header-nav-panel-background,#fff)!important;z-index:101}
html:root body.giraffe-menu-open>header .mega-nav .menu-panel{border:0!important;top:calc(100% - 1px);border-radius:0 0 20px 20px;box-shadow:none!important;background:var(--header-nav-panel-background,#fff)!important;isolation:isolate}
html:root body.giraffe-menu-open>header .mega-nav .menu-panel::before{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--giraffe-nav-height,72px));bottom:0;z-index:-1;border-radius:20px;box-shadow:0 8px 28px rgba(0,0,0,.12);pointer-events:none}
@media(max-width:767px){html:root body.giraffe-menu-open>header .mega-nav .menu-panel{border-radius:0 0 18px 18px}html:root body.giraffe-menu-open>header .mega-nav .menu-panel::before{border-radius:18px}}
html:root body.giraffe-menu-open>header[data-mytc-header] .nav{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;box-shadow:none!important}

/* Search surface and centered desktop placement. */
html:root body>header .search,html:root body>header[data-mytc-header] .search{border:0!important;outline:none;background:#ededed!important;border-radius:9px!important;box-shadow:none!important;color:#202020!important}
html:root body>header .search input{border:0!important;outline:none;background:transparent!important;box-shadow:none!important;color:#202020!important}
html:root body>header .search input::placeholder{color:#777!important}
@media(min-width:1100px){
 html:root body>header .h1in,html:root body>header .top,html:root body>header[data-mytc-header] [data-mytc-header-main]{grid-template-columns:minmax(0,1fr) minmax(240px,320px) minmax(0,1fr)!important}
 html:root body>header .search{justify-self:center!important;width:100%!important}
 html:root body>header .actions{justify-self:end}
}

/* Dim the header as well; only the navigation surface stays above the veil. */
body.giraffe-menu-open>header{z-index:auto!important}
body.giraffe-menu-open #mytc-announcement{position:relative;z-index:0}
body.giraffe-menu-open>header .header2,body.giraffe-menu-open>header .navwrap{position:relative;z-index:100}

html:root body>header .mytc-search-submit{display:flex;align-items:center;justify-content:center;font-size:inherit!important;color:inherit!important;min-width:24px!important;width:24px!important;flex:0 0 24px!important;padding:0 8px 0 0!important;overflow:visible!important}

/* Children are revealed by category hover or its explicit mobile toggle. */
.mega-branch{position:relative}.mega-branch-row{display:flex;align-items:center;gap:4px}.mega-branch-row>.mega-item{flex:1;min-width:0}
html:root body>header .mega-child-toggle{flex:0 0 36px;width:36px;height:40px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:23px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.mega-child-toggle:hover,.mega-child-toggle:focus-visible{background:#f4f4f4}.mega-child-toggle:focus-visible{outline:2px solid #b37e91;outline-offset:2px}
html:root body>header .mega-nested{position:absolute;left:100%;top:0;min-width:240px;width:270px;max-width:30vw;padding:10px;background:var(--header-nav-panel-background,#fff);border-radius:12px;box-shadow:0 8px 25px #00000012;z-index:3}
html:root body>header .mega-nested[hidden]{display:none!important}
@media(max-width:1000px){html:root body>header .mega-nested{position:relative;left:auto;top:auto;width:auto;max-width:none;min-width:0;margin:4px 0 8px;padding:4px 8px 4px 18px;box-shadow:none;border-left:2px solid #eee;border-radius:0}.mega-child-toggle[aria-expanded=true]{transform:rotate(90deg)}}

/* Equal gaps above and below the centered search row. */
@media(min-width:768px){html:root body.giraffe-store>header .nav,html:root body.giraffe-store>header[data-mytc-header] .nav{margin-top:0!important}}

/* Compact navigation with separate destination links and submenu toggles. */
html:root body>header .nav{min-height:48px!important}
html:root body>header .nav .menu-trigger{min-height:48px!important;padding:0 12px!important;text-decoration:none;font:inherit;color:inherit}
html:root body>header .nav .menu-trigger::after{display:none!important}
html:root body>header .nav .menu-toggle{display:flex;align-items:center;justify-content:center;width:32px;min-height:44px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
html:root body>header .nav .menu-toggle::after{content:"";width:6px;height:6px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg);margin-top:-4px}
html:root body>header .nav .menu-has-children>.menu-trigger{padding-right:0!important}
html:root body>header .nav .menu-toggle:focus-visible{outline:2px solid currentColor;outline-offset:-4px;border-radius:8px}
@media(max-width:767px){html:root body>header .nav .menu-trigger{padding:0 6px!important}html:root body>header .nav .menu-toggle{width:24px}}

/* Mobile links form a compact, evenly spaced group on the left. */
@media(max-width:767px){
html:root body.giraffe-store.giraffe-store>header .nav{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:clamp(12px,4vw,24px)!important;padding-left:12px!important;padding-right:12px!important}
html:root body.giraffe-store.giraffe-store>header .nav>.menu-group{flex:0 0 auto;width:auto;min-width:0;align-items:center}
html:root body.giraffe-store.giraffe-store>header .nav .menu-trigger{width:auto!important;padding:0!important;white-space:nowrap!important}
html:root body.giraffe-store.giraffe-store>header .nav .menu-toggle{flex:0 0 20px;width:20px;padding:0;margin-left:3px}
}


html:root body.giraffe-store .mobile-header{border-bottom:0!important;}

/* Categories start in the first column; nested products open alongside. */
html:root body.giraffe-store>header .mega-nav .mega-links{grid-column:1;border-left:0!important;padding-left:0!important;}
html:root body.giraffe-store>header .mega-nav .menu-group.is-open .menu-panel{grid-template-columns:minmax(240px,1fr) minmax(240px,1fr) minmax(240px,1fr);}
@media(max-width:767px){html:root body.giraffe-store>header .mega-nav .menu-group.is-open .menu-panel{grid-template-columns:minmax(0,1fr);}}

/* Mobile submenus open beside the category list, keeping it accessible. */
@media(max-width:1000px){
 html:root body.giraffe-store>header .mega-links:has(.is-child-open){position:relative;min-height:320px;}
 html:root body.giraffe-store>header .mega-links:has(.is-child-open)>.mega-branch{position:static;}
 html:root body.giraffe-store>header .mega-links:has(.is-child-open)>.mega-branch>.mega-branch-row,
 html:root body.giraffe-store>header .mega-links:has(.is-child-open)>.mega-item{width:40%;box-sizing:border-box;}
 html:root body.giraffe-store>header .mega-links:has(.is-child-open) .mega-branch-row>.mega-item{flex-direction:column;align-items:flex-start;gap:4px;font-size:12px;}
 html:root body.giraffe-store>header .mega-links:has(.is-child-open)>.mega-item{flex-direction:column;align-items:flex-start;gap:4px;font-size:12px;}
 html:root body.giraffe-store>header .mega-links>.mega-branch>.mega-nested{position:absolute;left:42%;top:0;width:58%;max-width:none;min-width:0;max-height:60dvh;overflow-y:auto;box-sizing:border-box;margin:0;padding:8px;background:var(--header-nav-panel-background,#fff);border:0;border-radius:12px;box-shadow:-4px 0 18px #0000000d;}
 html:root body.giraffe-store>header .mega-links>.mega-branch>.mega-nested .mega-item{font-size:12px;gap:8px;}
 html:root body.giraffe-store>header .mega-links:has(.is-child-open) .mega-item-image{width:32px;height:32px;flex-basis:32px;}
}

html:root body.giraffe-store>header .mega-nav .mega-why{grid-column:3;grid-row:1;min-width:0;}html:root body.giraffe-store.giraffe-store>header .mega-nav .mega-why h2{font-size:20px!important;color:#B37E91!important;margin:0 0 16px!important;}html:root body.giraffe-store.giraffe-store>header .mega-nav .mega-why h3{font-size:14px!important;line-height:1.4!important;color:#B37E91!important;margin:0 0 8px!important;}html:root body.giraffe-store>header .mega-nav .mega-why-card{border:1px solid #ECBFD0;border-radius:12px;padding:16px;margin-bottom:14px;background:#fff;}html:root body.giraffe-store.giraffe-store>header .mega-nav .mega-why-card p{font-size:12px!important;line-height:1.6!important;color:#68645f!important;margin:0!important;}@media(max-width:1000px){html:root body.giraffe-store>header .mega-nav .mega-why{grid-column:1/-1;grid-row:auto;}}

html:root body.giraffe-store.giraffe-store>header .mega-nav .mega-why-card p{font-weight:400!important;}

/* One desktop navigation surface with brand, categories and tools. */
@media(min-width:1024px){
 html:root body>header.giraffe-single-header :is(.header1,.top){display:none!important;}
 html:root body>header.giraffe-single-header .nav{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:18px!important;min-height:80px!important;height:auto!important;padding:12px 24px!important;box-sizing:border-box!important;}
 html:root body>header.giraffe-single-header .nav>.giraffe-nav-logo{flex:0 0 125px;display:flex;align-items:center;justify-content:flex-start;min-width:0;max-width:125px;margin-right:6px;}
 html:root body>header.giraffe-single-header .giraffe-nav-logo img{max-width:100%!important;object-fit:contain;}
 html:root body>header.giraffe-single-header .nav>.menu-group{flex:0 0 auto;align-self:stretch;}
 html:root body>header.giraffe-single-header .nav .menu-trigger{padding-inline:8px!important;}
 html:root body>header.giraffe-single-header .giraffe-nav-tools{margin-left:auto!important;display:flex!important;flex:0 1 auto;flex-wrap:nowrap!important;align-items:center;gap:14px;min-width:0;padding:0;border:0;}
 html:root body>header.giraffe-single-header .giraffe-nav-tools .search{box-sizing:border-box;width:clamp(180px,24vw,360px)!important;max-width:360px!important;min-width:160px;flex:1 1 auto;justify-self:auto!important;margin:0;height:44px;}
 html:root body>header.giraffe-single-header .giraffe-nav-tools .search input{min-width:0;}
 html:root body>header.giraffe-single-header .giraffe-nav-account{display:grid;place-items:center;flex:0 0 40px;width:40px;height:44px;color:#ECBFD0!important;text-decoration:none;padding:6px;box-sizing:border-box;}
 html:root body>header.giraffe-single-header .giraffe-nav-account svg{width:28px;height:28px;}
 html:root body>header.giraffe-single-header .giraffe-nav-tools a[href*="/Cart/"]{flex:0 0 40px;display:flex;align-items:center;justify-content:center;position:relative;min-width:40px;min-height:44px;}
 html:root body>header.giraffe-single-header .giraffe-nav-account:hover{color:#B37E91!important;}
 html:root body>header.giraffe-single-header .giraffe-nav-account:focus-visible{outline:2px solid #B37E91;outline-offset:2px;border-radius:8px;}
}
@media(min-width:1024px) and (max-width:1199px){
 html:root body>header.giraffe-single-header .nav{gap:10px!important;padding-inline:18px!important;}
 html:root body>header.giraffe-single-header .nav>.giraffe-nav-logo{flex-basis:110px;max-width:110px;}
 html:root body>header.giraffe-single-header .giraffe-nav-tools{gap:8px;}
 html:root body>header.giraffe-single-header .giraffe-nav-tools .search{width:190px!important;}
 html:root body>header.giraffe-single-header .nav .menu-trigger{padding-inline:5px!important;}
}

/* Air above the complete desktop navigation bar. */
@media(min-width:1024px){html:root body>header.giraffe-single-header{padding-top:18px!important;}}

/* Bridge the navigation padding so pointer travel keeps the submenu open. */
@media(min-width:1024px){html:root body>header.giraffe-single-header .menu-panel::after{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;background:transparent;}}

/* Product purchase buttons keep their own interactive area outside the product link. */
html:root body .giraffe-product-card-link{display:block;color:inherit;text-decoration:none;min-width:0;}
html:root body .giraffe-add-cart{display:block;box-sizing:border-box;width:100%;min-height:42px;padding:10px 16px;border:0;border-radius:999px;background:#B37E91;color:#fff;font-size:12px!important;font-weight:500!important;line-height:1.4!important;text-align:center;cursor:pointer;transition:background .15s;}
html:root body .giraffe-add-cart:hover{background:#9e687c;}
html:root body .giraffe-add-cart:focus-visible{outline:2px solid #45413f;outline-offset:3px;}
html:root body .giraffe-add-cart:disabled{background:#ddd5d8;color:#6d6568;cursor:default;}
html:root body .catalog-card>.giraffe-add-cart{margin-top:12px;}
html:root body .best-seller-card>.giraffe-add-cart{width:calc(100% - 32px);margin:0 16px 16px;}
html:root body .sc-details>.giraffe-add-cart{max-width:340px;margin-top:14px;}
html:root body .product-add:disabled{opacity:.55;cursor:default;}

html:root body #catalogContent button.giraffe-add-cart{border:0;border-radius:999px;padding:10px 16px;min-height:42px;background:#B37E91;color:#fff;margin:12px 0 0;}
html:root body #catalogContent button.giraffe-add-cart:disabled{background:#ddd5d8;color:#6d6568;cursor:default;}
html:root body .best-seller-card>.giraffe-product-card-link{display:flex;flex-direction:column;flex:1;}

/* Requested purchase button colors; sold-out styling remains distinct. */
html:root body button.giraffe-add-cart:not(:disabled),html:root body #catalogContent button.giraffe-add-cart:not(:disabled){background:#ECBFD0;color:#fff;box-shadow:inset 0 0 0 1px #ECBFD0;}
html:root body button.giraffe-add-cart:not(:disabled):hover,html:root body #catalogContent button.giraffe-add-cart:not(:disabled):hover{background:#fff;color:#ECBFD0;}