/*!
 * SLABVAULT card articles — dark site header
 *
 * The blog header (#onemall-navbar, injected site-wide by WP Headers And
 * Footers) is a light three-row bar: .om-topbar, .om-tabs and .om-header.
 * The card hero is near-black, so on card posts the two used to meet in a hard
 * seam. This restyles the header into the same ink palette for card posts only
 * — every selector is gated on body.sv-card-tpl, which the plugin only adds on
 * card requests, so no other page is touched.
 *
 * !important is deliberate: the site header ships its own #id-scoped rules and
 * some colours sit on nested spans, so specificity alone is not reliable here.
 * Hand-maintained — unlike card.css this file is NOT generated by
 * cardtpl_build_css_2026aug06.py.
 */
/* Three rows, three brightnesses. A flat black bar reads as one heavy slab and
   the layering the light version got from #f7f7f9 vs #fff disappears, so the
   rows are stepped instead — brand row lightest, tab row between, search row
   down at hero black — with hair lines between them. Nothing is removed: all
   three rows and every store link stay exactly where they are. */
body.sv-card-tpl #onemall-navbar{
  background:#0E1013!important;
  border-bottom:1px solid rgba(227,178,74,.30)!important;
}
body.sv-card-tpl #onemall-navbar .om-topbar{
  background:#1C2028!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
body.sv-card-tpl #onemall-navbar .om-tabs{
  background:#15181E!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
body.sv-card-tpl #onemall-navbar .om-tabs-m{background:#15181E!important}
body.sv-card-tpl #onemall-navbar .om-header{background:#0E1013!important;border-bottom:0!important}
body.sv-card-tpl #onemall-navbar .om-site-title{display:none!important}

/* The stock logo is a yellow badge over a black wordmark. brightness(0)+invert
   flattened the whole thing to white, which threw the brand yellow away. This
   swaps in artwork made for a dark bar: badge untouched, wordmark recoloured to
   the header's own #ECEAE3. content:url() on an <img> is supported everywhere
   current; an engine that ignores it simply shows the original file. */
body.sv-card-tpl #onemall-navbar .om-logo{
  content:url("logo-on-dark.png");
  width:100px;height:40px;object-fit:contain}
body.sv-card-tpl #onemall-navbar,
body.sv-card-tpl #onemall-navbar .om-logo-tips,
body.sv-card-tpl #onemall-navbar .om-logo-tips a,
body.sv-card-tpl #onemall-navbar .om-topbar-link{color:#B9BDC7!important}
/* Tab row, matched to the storefront's own store nav (www.onemall.jp .tabs-list):
   a vertical tile per store — 30px icon above a 14px/400 label, 4px between
   them, 8px of breathing room under the label, 15px between tiles. The blog's
   injected row ships the same 11 destinations laid out horizontally at 20px,
   so only the layout is restated here; colours stay in the dark palette. */
body.sv-card-tpl #onemall-navbar .om-tabs{height:auto!important}
body.sv-card-tpl #onemall-navbar .om-tabs .om-container{height:auto!important;min-height:0!important}
body.sv-card-tpl #onemall-navbar .om-tabs-scroll{padding:9px 0 0!important;height:auto!important}
body.sv-card-tpl #onemall-navbar .om-tabs-list{gap:15px!important;align-items:flex-end!important;height:auto!important}
body.sv-card-tpl #onemall-navbar .om-tab-item{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  gap:4px!important;padding:0 0 8px!important;margin:0!important;border-radius:0!important;
  border-bottom:2px solid transparent!important;
  transition:color .16s ease,border-color .16s ease}
body.sv-card-tpl #onemall-navbar .om-tab-item:hover{background:transparent!important;border-bottom-color:#E3B24A!important}
body.sv-card-tpl #onemall-navbar .om-tab-icon{
  width:30px!important;height:30px!important;object-fit:contain!important;
  border-radius:4px!important;margin:0!important;flex:0 0 auto}
body.sv-card-tpl #onemall-navbar .om-tab-text{
  font-size:14px!important;font-weight:400!important;line-height:21px!important;white-space:nowrap!important}

body.sv-card-tpl #onemall-navbar .om-tab-item,
body.sv-card-tpl #onemall-navbar #om-tabs-list a,
body.sv-card-tpl #onemall-navbar .om-tabs-m .om-tab-item{color:#ECEAE3!important}
body.sv-card-tpl #onemall-navbar .om-topbar-link:hover,
body.sv-card-tpl #onemall-navbar .om-tab-item:hover{color:#F1CD73!important}
body.sv-card-tpl #onemall-navbar .om-spliter{background:rgba(255,255,255,.20)!important}

/* Sign up carries the article's own CTA colour, so registering sits on the same
   visual path as the in-article buttons; sign in steps back to a ghost. The
   stock blue/red were built for a white bar — on black they read as unadapted,
   and white on #EA4141 is only 3.9:1. */
body.sv-card-tpl #onemall-navbar .om-btn-danger{
  background:linear-gradient(135deg,#F1CD73,#E3B24A 55%,#A97C24)!important;color:#2A1E05!important;
  box-shadow:0 6px 18px rgba(196,140,32,.28)}
body.sv-card-tpl #onemall-navbar .om-btn-danger:hover{filter:brightness(1.06)}
body.sv-card-tpl #onemall-navbar .om-btn-primary{
  background:transparent!important;color:#ECEAE3!important;
  border:1.5px solid rgba(255,255,255,.30)!important;line-height:31px!important}
body.sv-card-tpl #onemall-navbar .om-btn-primary:hover{
  border-color:#E3B24A!important;color:#F1CD73!important}

/* left label of the search row */
body.sv-card-tpl #onemall-navbar .om-header,
body.sv-card-tpl #onemall-navbar .om-header *:not(input):not(button):not(img):not(a){color:#B9BDC7!important}

/* search field */
body.sv-card-tpl #onemall-navbar .om-search-form,
body.sv-card-tpl #onemall-navbar .om-search-box{
  background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.30)!important}
body.sv-card-tpl #onemall-navbar .om-search-input{background:transparent!important;color:#fff!important}
body.sv-card-tpl #onemall-navbar .om-search-input::placeholder{color:#9CA1AE!important}
/* Neutral on purpose: gold now means "convert" (sign up, in-article offers), so
   search must not compete for it. */
body.sv-card-tpl #onemall-navbar .om-search-btn{
  background-color:rgba(255,255,255,.20)!important;color:#ECEAE3!important;border:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  line-height:1!important;font-weight:600!important}
/* Only the desktop button shows the word "Search"; under 768px the theme turns
   it into a 48px icon button with font-size:0, and forcing a size back on there
   spills the label out of the bar. */
@media (min-width:769px){
  body.sv-card-tpl #onemall-navbar .om-search-btn{font-size:15px!important}
}
body.sv-card-tpl #onemall-navbar .om-search-btn:hover{background-color:rgba(255,255,255,.26)!important}
/* Under 768px the theme turns that button into an icon sprite (a white
   magnifier meant for a near-black button). On gold it would vanish, so the
   glyph is redrawn inline in ink. */
@media (max-width:768px){
  body.sv-card-tpl #onemall-navbar .om-search-btn{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ECEAE3' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;background-position:center!important;background-size:20px 20px!important}
}
/* mobile hamburger is three ink-coloured bars drawn with a span + pseudos */
body.sv-card-tpl #onemall-navbar .om-hamburger{color:#ECEAE3!important}
body.sv-card-tpl #onemall-navbar .om-hamburger span,
body.sv-card-tpl #onemall-navbar .om-hamburger span::before,
body.sv-card-tpl #onemall-navbar .om-hamburger span::after{background:#ECEAE3!important}
body.sv-card-tpl #onemall-navbar .om-hamburger img{filter:brightness(0) invert(1);opacity:.9}

/* arrows, cart and any icon-only glyphs */
body.sv-card-tpl #onemall-navbar .om-tabs-arrow{
  background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.20)!important;color:#ECEAE3!important}
body.sv-card-tpl #onemall-navbar .om-tabs-arrow:hover{background:rgba(255,255,255,.18)!important}
body.sv-card-tpl #onemall-navbar svg{color:#ECEAE3!important;stroke:#ECEAE3!important;fill:none}
body.sv-card-tpl #onemall-navbar .om-cart svg,
body.sv-card-tpl #onemall-navbar .om-topbar-right svg{color:#ECEAE3!important}

/* Breadcrumb strip is part of the same dark block. The band carries the colour
   rather than main itself: main keeps a transparent background so no dark strip
   is left showing under the article once the paper-coloured body ends. */
/* overflow keeps the breadcrumb list's bottom margin from collapsing out of the
   band, which otherwise left a pale 25px gap between it and the hero. */
body.sv-card-tpl .sv-card-crumb-bar{background:#0E1013;overflow:hidden}
/* The theme's content wrapper pads 40px top and bottom; on card posts that shows
   as a pale strip under the dark header and an empty strip under the article. */
/* Flex column, so the whitespace between the template's block children stops
   generating anonymous line boxes (a flex container drops whitespace-only text
   nodes). Those boxes showed as pale 15px gaps around the article. !important
   throughout because the theme styles this element as #content, and an id
   selector outranks anything class-based here. */
body.sv-card-tpl main.sv-card-main,
body.sv-card-tpl .sv-card-col,
body.sv-card-tpl .sv-card-article{display:flex!important;flex-direction:column!important}
body.sv-card-tpl main.sv-card-main{padding-top:0!important;padding-bottom:0!important}
/* wpautop wraps the stray bits around the post body (an HTML comment, the
   JSON-LD script) in paragraphs. They render at zero height but still carry the
   theme's 15px bottom margin, which pushed the hero away from the breadcrumb
   band. Only these wrappers are direct children of <article> — real copy always
   sits inside .sv-article — so zeroing the margin here is safe. */
body.sv-card-tpl .sv-card-article > p{margin:0!important}
body.sv-card-tpl .sv-card-article > p:empty{display:none!important}
body.sv-card-tpl .sv-card-crumb,
body.sv-card-tpl .sv-card-crumb *{color:#9AA0AC!important}
body.sv-card-tpl .sv-card-crumb a{color:#B9BDC7!important;text-decoration:none}
body.sv-card-tpl .sv-card-crumb a:hover{color:#F1CD73!important}


/* tab labels live in a nested span with its own colour */
body.sv-card-tpl #onemall-navbar .om-tab-text{color:#ECEAE3!important}
body.sv-card-tpl #onemall-navbar .om-tab-item:hover .om-tab-text{color:#F1CD73!important}
/* dark-on-light glyph images (cart, help icons) need inverting on the dark bar */
body.sv-card-tpl #onemall-navbar .om-mobile-cart img,
body.sv-card-tpl #onemall-navbar img[alt="cart"]{filter:brightness(0) invert(1);opacity:.85}

/* Monochrome dark glyphs disappear on the dark bar. Brand tabs carry data-color
   and keep their own colours; the generic entries (Home / All Sites) and the
   all-black ZOZO mark get inverted to white. */
body.sv-card-tpl #onemall-navbar .om-tab-item:not([data-color]) .om-tab-icon,
body.sv-card-tpl #onemall-navbar .om-topbar-link img{filter:brightness(0) invert(1);opacity:.9}
/* ZOZO's mark is a solid black wordmark: inverting it produces a white blob, so
   it keeps its own artwork on a white chip the way Rakuma's already is. */
body.sv-card-tpl #onemall-navbar .om-tab-item[data-color="#000000"] .om-tab-icon{
  filter:none!important;background:#fff;padding:2px;border-radius:4px}