/* Noto Floral's typography.

   Theme11's own stylesheet already has this right - Arial for text, Great
   Vibes for the headings. What overrides it is our captured Theme11 skin,
   which was taken from theme11.hanawebsites.com and carries THAT demo's
   choices (DM Sans, its own sizes and colours). These rules put this shop's
   own look back. Every value below was measured off notoflora.com at a
   1440px window, not chosen.

   Three oddities, all deliberate:

   - the `body ` prefixes. The page skin is emitted in the BODY, after this
     file's link in the HEAD, so coming later is not enough - these have to
     out-specify it.

   - `:not(#t11x)`. The skin blankets every element with
     `body :not(#t11x){font-family:var(--t11-font)!important}`, which is
     specificity 111. Nothing weaker can give a heading its own face. #t11x
     matches no element, so this adds weight and nothing else. It is the
     skin's own idiom, not an invention.

   - the `br` rule. Live writes the sub-heading as a <p>; our promo-span shell
     writes <span><br>. Same words, but ours took two line boxes and the band
     came out 22px taller. Making the span a block and hiding the break makes
     the two identical. */

:root { --t11-font: Arial, Helvetica, sans-serif; }

body { color: #212121; }
body .bread-crumb { font-size: 16px; color: #212121; }

body .banner-title h1,
body .banner-title h2 {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #5f5f5f !important;
  line-height: 16px !important;
  margin: 6px 0 !important;
}

body .top-products .home-title:not(#t11x),
body .top-products h4.title_block:not(#t11x) {
  font-family: serif !important;
  font-size: 3.2em !important;
  font-weight: 500 !important;
  color: #484848 !important;
  text-transform: capitalize !important;
  line-height: 1.5em !important;
  margin: 51.2px auto 25.6px !important;
  padding-bottom: 25.6px !important;
}

body .top-products .prod-title:not(#t11x) {
  display: block !important;
  font-family: serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #484848 !important;
  text-transform: capitalize !important;
  line-height: 22px !important;
  margin: 0 0 10px !important;
}
body .top-products .title_block .prod-title br { display: none !important; }

body .price.product-price:not(#t11x),
body .product-container .product-price:not(#t11x) {
  font-family: system-ui !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #8c8c8c !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}


/* ---------------------------------------------------------------------
   The rest of this shop's own look.

   Measured off notoflora.com at a 1440px window on 05-10-2026 and
   compared element by element against our draft preview. Every value
   below is a place where the captured Theme11 skin carries
   theme11.hanawebsites.com's choice and this shop carries its own.

   The giveaway is the sizes. The skin works in em off a 16px base, so it
   lands on 12.5px, 13.5px, 15.5px; the stock stylesheet this shop
   actually uses sets whole pixels. So wherever a size below is a round
   number and ours was a half, the skin is the thing being corrected.

   `system-ui` on two of these is not a choice either - it is what the
   stock stylesheet leaves them at, having set no family for them. Those
   two rules need `:not(#t11x)` for the same reason the headings above
   do; everything else here is size, weight or colour, which the blanket
   rule does not touch. */


/* The top bar: the welcome line and the telephone number.

   The welcome line's `7%` is live's own value
   (`.topheader-navholder .sname{margin-top:7%}`). A percentage margin
   resolves against the containing block's CONTENT width, so this only lands
   where live lands once the header columns are the same width - which the
   grid rule further down now makes true. Before that fix our column was
   600px against live's 360px and this rendered 42px instead of 25.2px.

   Live zeroes the margin below 768px, so the media query is needed or the
   phone header gains a gap it never had. */
body #top-navbar-nav .sname { margin: 7% 0 0 !important; }
@media (max-width: 767px) {
  body #top-navbar-nav .sname { margin: 0 !important; }
}

body #top-header .sname,
body #top-header .sphone {
  font-size: 14.4px !important;
  font-weight: 600 !important;
  color: #676767 !important;
  text-transform: capitalize !important;
  letter-spacing: 1px !important;
}
body #top-header .sname { line-height: 36px !important; }
body #top-header .sphone { line-height: 28.8px !important; }


/* View Cart, and the number beside it - which is the brand orange, not
   the grey the skin gives it.

   The long selectors on this rule and the next two are not decoration.
   The skin sets these three with `!important` on
   `#top-navbar-nav .ViewCart #BtnCart`, `#top-navbar-nav .input-group
   #txtSearch` and `.top-products .product-container` - two ids and a
   class, or two classes. A shorter selector here loses on specificity
   however important it is, and the first attempt at these three did:
   the weight and letter-spacing landed and the size and colour did not,
   which is exactly what a specificity loss looks like. */
body #top-navbar-nav .ViewCart #BtnCart {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #5b7083 !important;
  letter-spacing: normal !important;
  line-height: 1.618 !important;
}
body #top-navbar-nav .ViewCart #BtnCart span {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #e15e2a !important;
}


/* The search box. Grey text on white, not near-black on nothing. */
body #top-navbar-nav .input-group #txtSearch {
  font-size: 14px !important;
  color: #8a8a8a !important;
  background-color: #fff !important;
  line-height: 26px !important;
}


/* A product tile sits on white, and its name is upper-case grey. */
body .top-products .product-container { background-color: #fff !important; }
body .product-name:not(#t11x),
body .product-container .product-name:not(#t11x) {
  font-family: system-ui !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #8c8c8c !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  line-height: 1.5 !important;
}


/* The panel over the map is nearly, but not quite, opaque. */
body #over_map { background-color: rgba(250, 250, 250, 0.93) !important; }


/* The footer's column headings: light, large and capitalised, over a
   near-white rule rather than the skin's faint 12%-white one. */
body #footer h4.title_block:not(#t11x) {
  font-family: system-ui !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  text-transform: capitalize !important;
  letter-spacing: normal !important;
  line-height: 1.3 !important;
  border-bottom-color: #e8e8e8 !important;
}
body #footer a {
  font-size: 15px !important;
  color: #eaeaea !important;
  line-height: 1.5 !important;
}
/* `#footer` is load-bearing on this one. There are TWO `.footer-copyright`
   blocks with identical classes: the copyright line inside the footer, which
   live sets to 15px, and the "Powered by" credits block, which is a direct
   child of BODY and stays at the page's 16px. An unscoped rule here caught
   both and shrank the credits line. */
body #footer .footer-copyright {
  font-size: 15px !important;
  color: #3c3a3a !important;
  line-height: 1.618 !important;
}


/* The SEO links band under the footer.

   48px all round, and deliberately NOT inside a media query: live measures
   48px at 1440, 1200, 768 and 375, while the skin steps down to
   `44px 20px 40px` and then `32px 15px 30px`. One unconditional rule at a
   higher specificity than the skin's `#super-footer` replaces both. It is a
   generous side padding on a phone, but it is what this shop serves. */
body #super-footer {
  background-color: #f5f5f5 !important;
  border-top: 2px solid #969696 !important;
  padding: 48px !important;
}
body #super-footer a {
  font-size: 16px !important;
  color: #5b7083 !important;
  line-height: 1.618 !important;
}


/* ---------------------------------------------------------------------
   The category and product pages.

   Measured 05-10-2026 against notoflora.com/categories/birthday/375967
   and /flower/modern-ties/3943444 at 1440px. The header, footer, tiles and
   prices were already right from the block above - these are the three
   things those two pages add. */


/* The category heading. Live leaves it to the stock stylesheet
   (`.heading-sec h1{font-size:3em;font-family:system-ui;
   text-transform:capitalize;font-weight:normal}`) and renders 48px of
   light grey; the skin overrides it to 32px, 600, #212121, no capitals.
   `.heading-sec h1` is one class and one type, so `body ... :not(#t11x)`
   clears it, and the `:not` is also what beats the font-family blanket. */
body .heading-sec h1:not(#t11x) {
  font-family: system-ui !important;
  font-size: 3em !important;
  font-weight: 400 !important;
  color: #333 !important;
  text-transform: capitalize !important;
  line-height: 1.3 !important;
  letter-spacing: normal !important;
}


/* The breadcrumb's links.

   Live has no rule for these at all - they are simply the page's ordinary
   link colour, #5b7083. The skin gives links its demo's orange (#b8471a)
   and the breadcrumb a grey (#8a8a8a), so this one line puts live's colour
   back. The skin's `.bread-crumb a` is NOT `!important`, so a plain rule
   with a `body` prefix is enough.

   Worth knowing, and deliberately not swept here: the same is true of
   every OTHER plain link - ours inherits #b8471a where live inherits
   #5b7083. A blanket `body a` rule would cross over the footer and menu
   colours set above, so the links that were measured are fixed by name
   instead. */
body .bread-crumb a { color: #5b7083 !important; }


/* The popup's button is pink on live, not the brand orange.

   Live scopes it tightly - `#BannerPopup .shopNow{background-color:#f86bbd;
   font-family:sans-serif}` - while the skin repaints `body .shopNow`
   orange for every popup. Matching live's own scope keeps the change
   inside that one popup. */
body #BannerPopup .shopNow:not(#t11x) {
  background-color: #f86bbd !important;
  font-family: sans-serif !important;
}


/* ---------------------------------------------------------------------
   The link colours, swept against live.

   Live gives every link it does not style specifically the same slate
   blue, #5b7083, which comes from the stock bundle's own `a` rule. The
   captured skin replaces that with its demo's orange, #b8471a, so every
   link the skin does not name individually came out orange here: "View
   details" on all twelve tiles, the "Powered by" credit, the breadcrumb.

   One rule puts live's colour back, and its weight is chosen so that it
   cannot do more than that. `body a` is two element names and no class,
   which beats the skin's bare `a` but loses to every rule that names a
   class or an id - the menu, the footer list, the tile names, the cart.
   Those keep their own colours exactly as they are. No `!important`, for
   the same reason: it is meant to be the floor, not the ceiling.

   Verified against live: not one link on that page is orange. */
body a { color: #5b7083; }


/* The main menu.

   Live leaves these to the stock stylesheet - system-ui, 500, #66605d,
   with 1px of tracking - and the skin overrides size, weight, colour and
   tracking together with its own megamenu rules. Those carry an id and
   three classes, so this needs the id-weighted `:not(#t11x)` to clear
   them, which is also what frees the font-family from the blanket. */
body #navigation-menu > ul > li > a:not(#t11x) {
  font-family: system-ui !important;
  font-size: 14.4px !important;
  font-weight: 500 !important;
  color: #66605d !important;
  letter-spacing: 1px !important;
}


/* The footer's list of links is 14px on live, not the 15px the footer's
   other links use - the 15px one is the email address. */
body #footer #divMenuItems a { font-size: 14px !important; }


/* The telephone number in the top bar is an ordinary link on live -
   16px, regular weight, the same slate blue as the rest. The skin makes
   it a bold 15px near-black. */
body #top-navbar-nav .col-md-4 a[href^="tel"] {
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #5b7083 !important;
  letter-spacing: normal !important;
}


/* The hero slide's "Shop" button.

   Live's slides carry a button (SubHeading2 "Shop" plus the row's link) and
   this shop's rows have one; Theme11's demo does not, which is why the hero
   block used to drop it for this caption style. The block now renders it
   whenever the row has the words for it, and these are live's own values for
   it. `display` is the one that matters to the eye - ours came out `block`,
   which stretched the button across the whole caption. */
body .carousel-caption a:not(#t11x) {
  font-family: system-ui !important;
  font-weight: 700 !important;
  color: #000 !important;
}

/* The caption itself is a plain centred block on live; the skin makes it a
   flex column. That is what stretched the button edge to edge - a flex
   container BLOCKIFIES its children, so `display:inline-block` on the button
   computed to `block` no matter how it was written. Fixing the parent is the
   fix; the button then takes the stock stylesheet's own inline-block. */
body .carousel-caption { display: block !important; }


/* ---------------------------------------------------------------------
   The header band and the hero caption, measured against live at 1440px.

   These are the differences a reader notices first, and all of them are
   the captured skin's values rather than this shop's. */


/* The strip under the menu. Live's is grey; the skin tints it pink. */
body .banner-title {
  background-color: #e5e5e5 !important;
  padding: 10px !important;
}


/* The hero caption.

   Live writes this shop's name in Bad Script at 64px - the font is already
   loaded on the page, beside Cinzel - and the skin replaces it with Cinzel
   at 52px and 22px, which is why the two lines read so differently. Live
   also gives the caption a 15% inset rather than letting it span the whole
   slide, and sets no text-shadow. The h3 being a block is what puts the
   Shop button on its own line underneath. */
body .carousel-caption {
  left: 15% !important;
  right: 15% !important;
  top: 1.111% !important;
  bottom: 15% !important;
  padding: 20px 0 0 !important;
}
body .carousel-caption h2:not(#t11x) {
  font-family: 'Bad Script', cursive !important;
  font-size: 4em !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin: 16px !important;
  padding: 0 0 .3em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  display: inline-block !important;
}
body .carousel-caption h3:not(#t11x) {
  font-family: 'Bad Script', cursive !important;
  font-size: 4em !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  margin: 16px !important;
  padding: 0 !important;
  text-transform: none !important;
  text-shadow: none !important;
  display: block !important;
}
body .carousel-caption a:not(#t11x) { text-shadow: none !important; }


/* The menu's own spacing, and the search box. Live pads a menu item by
   18px a side, not 20px, and its search field and button both carry
   Bootstrap's 6px/12px with a hairline round the button. */
/* A menu item is 36px tall on live - its own line-height, with no height
   set at all. The skin pins `height:50px` on the anchor, and because the
   row and the header are sized by it, that one declaration made the menu
   row 66px against live's 52px and the whole header 200px against 185px. */
body #navigation-menu > ul > li > a:not(#t11x) {
  padding: 0 18px !important;
  height: auto !important;
  /* The spread. Live's anchors carry 1.2em of side MARGIN on top of the
     18px padding - 17.28px at this font size - and ours had none, which is
     the whole of why our menu was ~240px narrower and bunched towards the
     middle.

     DELIBERATELY NARROWER THAN LIVE, at your request: 0.4em, not live's
     1.2em. A single line needs `1063 + 14 x margin` pixels against a menu
     row of about `viewport - 61`, so live's own value only fits down to a
     1366px window and wraps "Our Shop" onto a second row below that - which
     live itself does, measured at 1280 (two rows, 88px tall).

     0.4em keeps one row down to 1200px, where it lands 1142 into 1154 with
     12px to spare; 0.5em was tried first and missed 1200 by 8px. Below
     1200 the menu goes to the mobile drawer anyway. */
  margin: 0 0.4em !important;
}
body #top-navbar-nav .input-group #txtSearch { padding: 6px 12px !important; }
body #top-navbar-nav .input-group #BtnSearch {
  padding: 6px 12px !important;
  border: 1px solid #e15e2a !important;
}


/* The logo, at the size live draws it.

   Everything else about it already matches - display, margins, max-width,
   the wrapper - and the one difference is a cap the skin adds:
   `max-height:92px`, where live computes `max-height:none`. The file is
   300x100, so the cap was scaling it down to 276x92. Lifting the cap lets
   it draw at its own size, as live does. */
body #top-navbar-nav img#ShopLogo { max-height: none !important; }


/* ---------------------------------------------------------------------
   The header's grid, which is the root of several size differences.

   The markup is identical to live's - the same
   `col-md-4 / col-md-4 / col-md-3` classes - but the skin makes their
   container a FLEX row. Bootstrap's columns size themselves by percentage
   width, which a flex parent ignores, so they came out 450/300/450 where
   live has 390/390/293. That one declaration was why the search box was
   wider than live's, why the welcome column was 600px instead of 360px,
   and why `margin-top:7%` landed 17px low.

   The width goes back to live's 1200px with Bootstrap's own 15px gutters,
   inside the same `min-width:1200px` guard Bootstrap uses, so narrower
   screens keep the fluid container they have now. */
@media (min-width: 1200px) {
  body #top-navbar-nav .topheader-navholder-rg > .container {
    width: 1200px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* The three columns take live's widths.

   Turning the container back to `display:block` was tried first and is
   WRONG: our column CSS is the flex kind (`flex-basis`, not a float with a
   percentage width), so without a flex parent all three stacked full-width
   and the header grew to 541px. The container stays flex and the columns
   are given live's proportions instead. `.ViewCart` is absolutely
   positioned on both sides, so it takes no space here. */
body #top-navbar-nav .topheader-navholder-rg > .container > .col-md-4 {
  flex: 0 0 33.3333% !important;
  max-width: 33.3333% !important;
}
body #top-navbar-nav .topheader-navholder-rg > .container > .col-md-3 {
  flex: 0 0 25% !important;
  max-width: 25% !important;
}

/* and Bootstrap's own 15px gutters, which the skin drops. Without them each
   column's CONTENT box is 30px too wide, which is what made `margin-top:7%`
   land on 27.3px instead of live's 25.2px and the search field 30px wide. */
body #top-navbar-nav .topheader-navholder-rg > .container > [class*="col-"] {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* A menu item is a plain block on live, 36px tall by its own line-height.
   The skin makes the anchor a flex item, which stretched it to 50px and
   made the whole menu row 14px taller than live's. */
body #navigation-menu > ul > li > a:not(#t11x) { display: block !important; }
body #navigation-menu > ul > li { align-self: flex-start !important; }


/* WHY THE PROMO HEADINGS ARE A PLAIN SERIF, NOT GREAT VIBES.

   Live's rule for `.title_block` and `.prod-title` is `font-family:"great
   vibes"` with NO fallback - and on live that font never loads. Measured
   05-10-2026: `document.fonts.check('16px "Great Vibes"')` is FALSE on
   notoflora.com and TRUE here, because this app links the Google Fonts
   stylesheet and live does not. So live falls back to the browser's default
   serif and renders "Our Store Collection" in Times, while ours rendered the
   script face live asked for and never got.

   Matching live means reproducing that, so these say `serif`. It is a
   faithful copy of what a visitor to notoflora.com sees, NOT of what its
   stylesheet intends - if the font is ever fixed on live, or if the shop
   would rather have the script face it asked for, change these two rules
   back to `'Great Vibes', cursive` and nothing else needs to move. */


/* The promo heading sits centred, and carries no rule under it.

   Two things were wrong. The block is 600px wide inside a 1200px row, and
   live centres it with auto side margins - the rule above said `0`, which
   pinned it to the left; that is the misalignment. And the skin draws a
   54x3px orange bar under it as a `::after`, where live's `.title_block`
   has `content:none` and draws nothing. */
body .top-products .title_block::after,
body .top-products .home-title::after { display: none !important; content: none !important; }


/* The footer's icons.

   Live's small contact icons are a light grey and ours are salmon; the big
   Store and Pick-Up icons are grey on live and orange here. The two icons
   that live DOES colour - the map pin and the Yelp mark - keep their own
   colours, so they are named separately rather than swept up by the first
   rule. */
body #footer #vp_footer .fa { color: #dadada !important; }
body #footer #vp_footer .fa-map-marker { color: #d7483c !important; }
body #footer #vp_footer .fa-yelp { color: #d0272e !important; }
body #super-footer .fa,
body .corcontent .fa { color: #bfbfbf !important; }


/* The sub-menu.

   Live's panel is a dark wash with white capitals over a magenta rule; the
   skin leaves it white with small grey text. The background only shows on a
   real :hover - forcing the panel open with a class reports white, which is
   why this had to be measured with the pointer actually over the menu. */
body #navigation-menu .megamenu > li.dropdown > .dropdown-menu.custom-dropdown {
  background-color: rgba(0, 0, 0, 0.8) !important;
  border-top: 2px solid #f05cf5 !important;
  padding: 20px !important;
}
body #navigation-menu .dropdown-menu.custom-dropdown a:not(#t11x) {
  font-family: system-ui !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  line-height: 30px !important;
  padding: 3px 0 !important;
}


/* The header search and the View Cart link.

   The search button. Live's `.input-group` is Bootstrap 3's table model, so
   `.input-group-btn` is a table-cell that shrinks to its content and the
   button lands on 40px; ours is a flex item and comes out 46px. The six
   pixels come straight off the field beside it, which is why ours measured
   215px against live's 223px. Rebuilding the whole group as a table risks
   more than it fixes, so the button is simply given live's rendered width
   and the field takes the rest. `letter-spacing` goes back to live's
   `normal` while we are here.

   The cart. Live's trolley is the same slate blue as the words next to it
   and sits tight against them; the skin paints it brand orange and pushes
   it 6px away. The count beside it is already correct on both - it is
   orange on live too. The link's own offset is 5% of the header on live
   (71.23px of 1425) where ours sat at 112.5px. */
body #top-navbar-nav .input-group #BtnSearch {
  width: 40px !important;
  letter-spacing: normal !important;
}
/* and the field takes the rest, 263 - 40. Given explicitly because the flex
   model leaves it 2px short of the table model live uses. */
body #top-navbar-nav .input-group > #txtSearch {
  flex: 0 0 auto !important;
  width: 223px !important;
  margin: 0 !important;
}
body #top-navbar-nav .ViewCart #BtnCart .fa {
  color: #5b7083 !important;
  margin-right: 0 !important;
}
body #top-navbar-nav .ViewCart {
  right: 5% !important;
  top: 3.75px !important;
}


/* ---------------------------------------------------------------------
   The search box: where it sits, and what it looks like.

   POSITION. Live's third column carries `pull-right`, which in Bootstrap 3
   is `float:right` - and a float means nothing to a flex item, so ours sat
   in flow 98px to its left. `margin-left:auto` is the flex equivalent and
   lands it on live's 1005px exactly. Live also top-aligns the three
   columns; the skin centres them, which dropped the search 27px. The 14px
   top padding on the container is the skin's too - live has none.

   STYLE. Live draws no box at all: the group has no border and no
   background, and the field carries a single magenta underline - the same
   #f05cf5 as the rule above the sub-menu. The skin instead paints a full
   bordered white box around the group, which is the rounded field you see
   here. The `border-bottom-color` longhand is spelled out because the skin
   pins `border-bottom-color:currentcolor !important`, and a shorthand at
   equal weight was losing to it - the underline came out the field's own
   grey instead of magenta. */
body #top-navbar-nav .topheader-navholder-rg > .container {
  align-items: flex-start !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body #top-navbar-nav .topheader-navholder-rg > .container > .col-md-3 {
  margin-left: auto !important;
}
body #top-navbar-nav .input-group {
  border: 0 !important;
  background-color: transparent !important;
  /* The search button is square on both sides - `border-radius:0` on the
     button itself. What rounded ours was the GROUP: the skin gives it a
     22px radius and `overflow:hidden`, so the square button was being
     clipped into a pill. Live's group has neither. */
  border-radius: 0 !important;
  overflow: visible !important;
}
body #top-navbar-nav .input-group > #txtSearch:not(#t11x) {
  border: 0 !important;
  border-bottom-width: 1px !important;
  border-bottom-style: solid !important;
  border-bottom-color: #f05cf5 !important;
}


/* The shop's name in the welcome line.

   Live sets it in the brand orange #e15e2a at weight 600 - the same orange
   as the search button and the cart count. The skin uses its own darker
   #b8471a at 700, which is the shade it gives links generally. */
body #top-navbar-nav .sname span:not(#t11x) {
  color: #e15e2a !important;
  font-weight: 600 !important;
}


/* The sub-menu spans the row, and lights up magenta on hover.

   WIDTH. Live's panel runs the full width of the menu row - `left:0;
   right:0`, 1425px - because live's `li.dropdown` is POSITION:STATIC, so
   the panel measures itself against the full-width row above it. The skin
   makes that li `position:relative`, which traps the panel inside the menu
   item's own 239px and is why ours was a narrow box under one word.
   Releasing the li is the whole fix; the panel then stretches on its own.

   HOVER. A sub-menu link turns #f05cf5 on live - the same magenta as the
   rule above the panel and the search underline. */
body #navigation-menu .megamenu > li.dropdown { position: static !important; }
body #navigation-menu .megamenu > li.dropdown > .dropdown-menu.custom-dropdown {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
}
body #navigation-menu .dropdown-menu.custom-dropdown a:hover:not(#t11x) {
  color: #f05cf5 !important;
  /* and NO background. Live leaves the hovered row transparent - the only
     marks are the magenta text and the stock sheet's 2px magenta right
     border on the li. The skin adds `background:#fdf1ec`, which is the pale
     pink band across the row. */
  background-color: transparent !important;
}


/* The logo's own row, which is what gives View Cart its space.

   Live puts `margin:16px 0` on `#vp_logo`, so the logo starts 17px down and
   its column is 133px tall; ours had no margin, so the logo sat at y=1 and
   crowded the top of the header. That 16px is the clear band View Cart sits
   in - everything else in the header (View Cart at y=4, the welcome line at
   25, the phone at 67, the search at 34) already matched live exactly, so
   this margin is the whole difference. */
body #top-navbar-nav #vp_logo { margin: 16px 0 !important; }


/* The menu's hover, which this side had none of at all.

   Live marks the hovered item with a 2px #212121 underline, and the text
   colour depends on the kind of item - measured by hovering each one, since
   `getComputedStyle` cannot see `:hover`:

     a plain item (Birthday, Subscriptions)  -> #f05cf5, the magenta accent
     a dropdown parent (a.drop-btn)          -> #212121

   Our markup carries live's own class names, `drop-btn MenuLink` on the
   parents and `li.dropdown` around them, so the same split applies. The
   dropdown rule is written with the extra class so it outranks the plain
   one for those items. */
body #navigation-menu > ul > li > a:hover:not(#t11x) {
  color: #f05cf5 !important;
  border-bottom: 2px solid #212121 !important;
}
body #navigation-menu > ul > li.dropdown:hover > a:not(#t11x),
body #navigation-menu > ul > li > a.drop-btn:hover:not(#t11x) {
  color: #212121 !important;
  border-bottom: 2px solid #212121 !important;
}


/* The hovered sub-menu item's magenta edge.

   The stock stylesheet both sites load says
   `.custom-dropdown li:hover{border-right:2px solid #f05cf5;padding:4px 0}`,
   and live renders exactly that; something in the skin was zeroing it here,
   so our hover had the magenta text but none of the edge beside it. */
body #navigation-menu .dropdown-menu.custom-dropdown li:hover:not(#t11x) {
  border-right: 2px solid #f05cf5 !important;
  padding: 4px 0 !important;
}


/* The caret on a drop-down menu item.

   With the side margins restored, six of the seven items landed on live's
   positions and the four drop-down ones were each exactly 6px wide - all of
   it in this little chevron. Live draws it at the anchor's own 14.4px with
   no margin (10px wide); the skin shrinks it to 11px and pushes it 8px off
   the word, which is 8 + 8 = 16 against live's 10. */
body #navigation-menu > ul > li > a .fa-angle-down {
  font-size: inherit !important;
  margin: 0 !important;
}


/* The menu's layout model, which is the last of the spread.

   Live's `ul` is a plain BLOCK with `text-align:center` and inline-block
   items; the skin makes it a flex row. The visible difference is the gap
   between items: inline-blocks are separated by the whitespace in the
   markup (~4px each), and a flex row collapses that. Across six gaps it
   came to 26px, so our menu was that much narrower than live's even once
   the side margins and the caret matched.

   With this, all seven items sit within 1px of live's x and width. */
body #navigation-menu > ul.nav {
  display: block !important;
  text-align: center !important;
}
body #navigation-menu > ul.nav > li {
  display: inline-block !important;
  float: none !important;
  vertical-align: top !important;
}


/* The back-to-top button.

   Live's is a SQUARE orange tile with a white chevron; the skin makes it a
   white circle with an orange chevron and a pale border. Measured on live:

     radius 0 | background #e15e2a | icon #fff at 16px | no border | 44x44

   `display` is left as the skin's flex rather than live's inline-block,
   because flex is what centres the chevron here and the two look the same
   once the shape and colours match. */
body .go-up a {
  background-color: #e15e2a !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 44px !important;
  height: 44px !important;
  color: #fff !important;
}
body .go-up a .fa {
  color: #fff !important;
  font-size: 16px !important;
}


/* No old background can flash on a sub-menu link, in any state.

   The pale `#fdf1ec` was still reachable: the earlier rule only cleared
   `:hover`, while the skin sets that background on `a:focus` TOO, and gives
   the link `transition: background-color .18s, color .18s`. So moving the
   pointer faded the old colour in and out - the flicker you could see.

   Clearing it on the base, hover, focus and active states leaves nothing to
   fade. The timing is live's own, `0.25s ease-in-out` (live sets it on all
   properties and on the li as well), so the colour change stays smooth
   rather than snapping. */
body #navigation-menu .dropdown-menu.custom-dropdown a,
body #navigation-menu .dropdown-menu.custom-dropdown a:hover,
body #navigation-menu .dropdown-menu.custom-dropdown a:focus,
body #navigation-menu .dropdown-menu.custom-dropdown a:active,
body #navigation-menu .dropdown-menu.custom-dropdown li:hover > a {
  background-color: transparent !important;
  background-image: none !important;
  transition: 0.25s ease-in-out !important;
}
body #navigation-menu .dropdown-menu.custom-dropdown li { transition: all 0.25s ease-in-out !important; }