/* CAGETOPIA MENU (theme 89), 2026-10 redesign.
Every panel has the same layout: an intro on the left, the products in the middle, a photo on the right.
Classes start with "cm-" so the older menu rules don't apply to them. */
.ct-header{
  --cm-plum:#3E3549;
  --cm-purple:#7E4E92;
  --cm-raspberry:#A33C68;
  --cm-raspberry-deep:#86305A;
  --cm-muted:#6E6577;
  --cm-tint:#F5EFF6;
  --cm-tile:#F8F5F8;
  --cm-peach:#F7ECE3;
  --cm-line:#E9E2EC;
  --cm-blue:#3060A8;   /* the blue of "Cage" in the logo */
}
/* Brand bar and the thin strip under the header both start in purple */
.ct-header .ct-header-top,.ct-header::after{
  background:linear-gradient(90deg,#7E4E92 0%,#B4537A 50%,#E59A69 100%)!important;
}

/* Logo size, and the row of department buttons */
@media (min-width:1101px){
  .ct-header .ct-logo{flex:0 0 auto!important}
  .ct-header .ct-logo,.ct-header .ct-logo a{width:clamp(140px,13vw,210px)!important;height:auto!important}
  .ct-header .ct-logo img{width:100%!important;height:auto!important;max-width:none!important;object-fit:contain!important}
  .ct-header .ct-head-menu{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:2px!important;margin:0!important;padding:0!important;list-style:none}
  .ct-header .ct-head-menu>.cm-item{position:static!important;float:none!important;margin:0!important;padding:0!important;list-style:none}
}
.ct-header .cm-btn{
  appearance:none;border:0;background:none;cursor:pointer;
  padding:9px 13px;border-radius:9px;
  font:600 16px/1.2 "Era Source Sans 3",Arial,sans-serif;
  color:var(--cm-plum);white-space:nowrap;letter-spacing:0;
  transition:background .15s,color .15s;
}
.ct-header .cm-btn:hover{background:var(--cm-tint)}
.ct-header .cm-item.cm-open>.cm-btn{background:var(--cm-purple);color:#fff}
.ct-header .cm-btn:focus-visible,.ct-header .cm-panel a:focus-visible{outline:2px solid var(--cm-raspberry);outline-offset:2px}
.ct-header .cm-btn::after{content:none!important;display:none!important}
/* Keep the whole header row on screen: the old header rules add an 18px gap and wide side padding */
@media (min-width:1101px){
  .ct-header .ct-nav ul.ct-head-menu{gap:2px!important;column-gap:2px!important;justify-content:center!important}
  /* Hold the menu row at its final height while the store's basic menu is swapped for this one, so the page doesn't jump */
  .ct-header .ct-nav ul.ct-head-menu{height:37px!important;min-height:37px!important;overflow:visible!important}
}
@media (min-width:1101px) and (max-width:1400px){
  .ct-header .ct-header-bottom{padding-left:24px!important;padding-right:24px!important}
  .ct-header .ct-mobile-row{gap:12px!important}
  .ct-header .cm-btn{padding:9px 9px;font-size:15.5px}
}
@media (min-width:1101px) and (max-width:1260px){
  .ct-header .cm-btn{padding:8px 6px;font-size:14.5px}
}

/* Desktop panel */
.ct-header .cm-panel{display:none;white-space:normal;line-height:1.4;letter-spacing:0}
@media (min-width:1101px){
  .ct-header .cm-panel{
    position:fixed;left:50%;z-index:1000;
    width:min(1312px,calc(100vw - 48px));
    background:#fff;border-radius:22px;padding:22px;
    box-shadow:0 24px 60px -20px rgba(62,53,73,.35),0 2px 6px rgba(62,53,73,.06);
    grid-template-columns:250px minmax(0,1fr) 270px;gap:24px;
    opacity:0;transform:translate(-50%,-6px);transition:opacity .16s ease,transform .2s ease;
    font-family:"Era Source Sans 3",Arial,sans-serif;text-align:left;
  }
  .ct-header .cm-panel.cm-no-card{grid-template-columns:250px minmax(0,1fr)}
  .ct-header .cm-item.cm-open>.cm-panel{display:grid}
  .ct-header .cm-item.cm-open>.cm-panel.cm-shown{opacity:1;transform:translate(-50%,0)}
}
@media (min-width:1101px) and (max-width:1240px){
  .ct-header .cm-panel{grid-template-columns:230px minmax(0,1fr)!important}
  .ct-header .cm-card{display:none!important}
}

/* Left intro */
.ct-header .cm-rail{background:var(--cm-tint);border-radius:16px;padding:24px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.ct-header .cm-kicker{font:700 12px/1.2 "Era Source Sans 3",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cm-raspberry)}
.ct-header .cm-rail h2{margin:0;font:700 30px/1.05 "Era Source Sans 3",Arial,sans-serif;letter-spacing:-.025em;color:var(--cm-plum);text-wrap:balance}
.ct-header .cm-rail p{margin:0;color:var(--cm-muted);font-size:16px;line-height:1.45}
.ct-header .cm-all{align-self:flex-start;background:var(--cm-raspberry);color:#fff!important;font-weight:700;font-size:16px;line-height:1.2;padding:10px 16px;border-radius:9px;text-decoration:none!important;transition:background .15s}
.ct-header .cm-all:hover{background:var(--cm-raspberry-deep)}
.ct-header .cm-extra{list-style:none;margin:auto 0 0;padding:14px 0 0;border-top:1px solid rgba(62,53,73,.12);display:grid;gap:2px}
.ct-header .cm-extra a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;font-weight:600;font-size:16.5px;line-height:1.25;color:var(--cm-plum)!important;text-decoration:none!important}
.ct-header .cm-extra a:hover{color:var(--cm-raspberry)!important}
.ct-header .cm-extra small{display:block;font-weight:400;font-size:14px;color:var(--cm-muted)}
.ct-header .cm-extra i{font-style:normal;color:var(--cm-raspberry);transition:transform .15s}
.ct-header .cm-extra a:hover i{transform:translateX(3px)}

/* Spotlight: the one product a department leads with */
.ct-header .cm-spot{display:grid;background:#fff;border-radius:14px;overflow:hidden;text-decoration:none!important;box-shadow:0 1px 0 rgba(62,53,73,.06),0 8px 20px -12px rgba(62,53,73,.35);transition:transform .2s}
.ct-header .cm-spot:hover{transform:translateY(-2px)}
.ct-header .cm-spot-img{position:relative;height:112px;background:var(--cm-tile);overflow:hidden}
.ct-header .cm-spot-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10px 14px;mix-blend-mode:multiply}
.ct-header .cm-spot-body{padding:12px 14px 14px;display:grid;gap:2px}
.ct-header .cm-spot small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cm-raspberry)}
.ct-header .cm-spot strong{font-size:18px;line-height:1.2;color:var(--cm-plum)}
.ct-header .cm-spot span span{font-size:14px;color:var(--cm-muted)}
.ct-header .cm-spot em{font-style:normal;font-weight:700;font-size:14.5px;color:var(--cm-raspberry);margin-top:4px}

/* Product rows */
.ct-header .cm-main{min-width:0}
.ct-header .cm-groups{display:grid;gap:8px 28px;align-content:start}
.ct-header .cm-group{min-width:0}
.ct-header .cm-group h3{margin:4px 0 8px;font:700 12.5px/1.2 "Era Source Sans 3",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--cm-muted)}
.ct-header .cm-rows{list-style:none;margin:0;padding:0;display:grid;gap:2px 20px}
.ct-header .cm-rows>li{margin:0;padding:0;list-style:none}
.ct-header .cm-row{display:flex;align-items:center;gap:14px;padding:7px 8px;margin:0 -8px;border-radius:12px;text-decoration:none!important;transition:background .15s}
.ct-header .cm-row:hover{background:var(--cm-tint)}
.ct-header .cm-thumb{flex:none;width:68px;height:68px;border-radius:12px;background:var(--cm-tile);overflow:hidden}
.ct-header .cm-thumb img{width:100%;height:100%;object-fit:contain;padding:5px;mix-blend-mode:multiply}
.ct-header .cm-text{min-width:0}
.ct-header .cm-name{display:block;font-weight:600;font-size:17px;line-height:1.2;color:var(--cm-plum)}
.ct-header .cm-row:hover .cm-name{color:var(--cm-raspberry)}
.ct-header .cm-hint{display:block;font-size:14.5px;line-height:1.3;color:var(--cm-muted)}
.ct-header .cm-badge{display:inline-block;margin-left:6px;vertical-align:2px;background:var(--cm-blue);color:#fff;font-size:10.5px;font-weight:700;line-height:1.4;padding:2px 7px;border-radius:99px;white-space:nowrap}
.ct-header .cm-plain .cm-row{padding:8px}
.ct-header .cm-plain .cm-name{font-size:16.5px}

/* Right photo card */
.ct-header .cm-card{position:relative;border-radius:16px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;color:#fff!important;background:var(--cm-plum);text-decoration:none!important}
.ct-header .cm-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.ct-header .cm-card:hover img{transform:scale(1.04)}
.ct-header .cm-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(62,53,73,0) 35%,rgba(46,36,58,.88) 100%)}
.ct-header .cm-card-body{position:relative;z-index:2;padding:20px;display:grid;gap:6px}
.ct-header .cm-card small{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.ct-header .cm-card strong{font-size:23px;line-height:1.1;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.ct-header .cm-card em{font-style:normal;font-weight:700;font-size:14.5px;margin-top:4px}
.ct-header .cm-card.cm-plain-card{background:var(--cm-peach);color:var(--cm-plum)!important}
.ct-header .cm-card.cm-plain-card::before{display:none}
.ct-header .cm-card.cm-plain-card em{color:var(--cm-raspberry)}
/* Help menu card: full photo like the other menu cards (thinking guinea pig on pink); the pig and bubble are on the right of the
picture, so keep the right side in view */
.ct-header .cm-card[href="/contact-us"]:not(.cm-plain-card) img{object-position:right center}
/* Photo cards: the "Contact us →" / "Shop … →" line stays white on the dark fade (a general link rule was turning it raspberry) */
.ct-header .cm-card:not(.cm-plain-card) em{color:#fff!important}
.ct-header .cm-card[href="/contact-us"]:not(.cm-plain-card) em{color:var(--cm-raspberry)}
.ct-header .cm-heart{font-size:30px;line-height:1;color:var(--cm-raspberry)}

/* Phones and tablets: departments open as sections inside the Menu drawer */
@media (max-width:1100px){
  .ct-header .ct-head-menu>.cm-item{display:block;float:none;border-top:1px solid var(--cm-line);margin:0;padding:0;list-style:none}
  .ct-header .cm-btn{display:flex;width:100%;justify-content:space-between;align-items:center;padding:15px 4px;border-radius:0;font-size:17px;font-weight:700;text-align:left}
  .ct-header .cm-btn:hover{background:none}
  .ct-header .cm-btn::before{content:"+";order:2;color:var(--cm-raspberry);font-size:22px;font-weight:400;line-height:1;transition:transform .2s}
  .ct-header .cm-item.cm-open>.cm-btn{background:none;color:var(--cm-plum)}
  .ct-header .cm-item.cm-open>.cm-btn::before{transform:rotate(45deg)}
  .ct-header .cm-item.cm-open>.cm-panel{display:grid;gap:14px;padding:0 0 18px}
  .ct-header .cm-rail{background:none;padding:0;gap:12px}
  .ct-header .cm-rail h2,.ct-header .cm-rail p,.ct-header .cm-rail .cm-kicker{display:none}
  .ct-header .cm-extra{margin:0;padding:6px 0 0}
  .ct-header .cm-groups{grid-template-columns:1fr!important}
  .ct-header .cm-rows{grid-template-columns:1fr!important}
  .ct-header .cm-thumb{width:52px;height:52px;border-radius:10px}
  .ct-header .cm-name{font-size:16.5px}
  .ct-header .cm-card{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ct-header .cm-panel,.ct-header .cm-btn,.ct-header .cm-row,.ct-header .cm-spot,.ct-header .cm-card img{transition:none!important}
}