/* site-overrides v1.0.3 - overrides that do not fit in index.css (92.5% full). */
/* Served from the ColorMe FTP: /assets/css/ =                                  */
/* https://file001.shop-pro.jp/PA01008/381/assets/css/site-overrides.v1.0.3.css  */
/* Linked from index.html directly after nav-icons.v1.1.2.css, which is after    */
/* the shop-generated index.css, so plain class selectors already win on order.  */
/* Where it was free, selectors are element-qualified (ul./li./button.) so they  */
/* also win on specificity and do not depend on load order at all.               */
/* Pure ASCII on purpose - no BOM needed. Bump the file name, never a ?v= query  */
/* (CloudFront does not keep the query string in the cache key).                 */

/* ===========================================================================
   [A] Verbatim copy of the <style> block that used to sit in index.html head.
   Moved here to give index.html its bytes back; the text below is byte-for-byte
   identical to the original block. It covers:
     - nav SVG icons shown only in the SP drawer (the PC header has no width
       budget: 768-826px / 1280-1356px push the cart off screen)
     - SP sidebar collapse (hide .l-side-slider, start the 4 headings closed)
     - the min-width:768px !important rule that undoes the inline display
       slideToggle leaves behind on PC
   Do not reformat: it is kept as one line so a diff against the old inline
   block stays a single comparison.
   =========================================================================== */
.l-main-navi-list__link svg{display:none}@media screen and (max-width:767px){.l-main-navi-list__link svg{display:block}}@media screen and (max-width:767px){.l-side-slider{display:none}.l-side-navi>.js-side-toggle__contents{display:none}.l-side-navi__ttl.js-side-toggle__btn{cursor:pointer}.l-side-navi__ttl.js-side-toggle__btn::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}.l-side-navi__ttl.js-side-toggle__btn.is-open::after{transform:rotate(-135deg)}}@media screen and (min-width:768px){.l-side-navi>.js-side-toggle__contents{display:block!important}}

/* ===========================================================================
   [B] audit medium #1  ia-side-banner-1col
   The three "kanteisho" side banners are the only entry point to those
   high-price own-brand products, but index.css:566 flips the list back to
   display:block below 767px, so they stack and eat ~800px at the very bottom
   of the page. Keep the 3-up row on SP.
   index.css only sets `display:block` (ul) and `width:auto` (li) in the
   max-width:767px block - the max-width:1023px block right above it already
   supplies display:flex / flex-wrap:wrap / margin:-10px and the 10px item
   padding, so only those two declarations have to be undone. flex-wrap stays
   `wrap` on purpose: site-common's GAS refresh can render more than three
   items, and those should start a second row of three rather than squeeze.
   =========================================================================== */
@media screen and (max-width: 767px) {
  ul.l-side-bottom-bnr {
    display: flex;
  }
  li.l-side-bottom-bnr__item {
    width: 33.3333%;
  }
  /* At a 390px viewport the tile is ~123px wide and the 4:3 image only ~78px
     tall, so the 21px overlay title from index.css:2652 would wrap far out of
     the tile (.title_area is absolutely positioned and only anchored left, so
     it grows upward over the sidebar). Pin it to both edges, shrink it and
     clamp it to three lines. margin-bottom is left at index.css's 10px so a
     wrapped second row still has a gap. */
  li.l-side-bottom-bnr__item .title_area {
    left: 6px;
    right: 6px;
    bottom: 4px;
  }
  li.l-side-bottom-bnr__item .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /* Two lines, not three: the [F] scrim block caps .title_area at 70% of a
       77px tile (= 54px), and 3 lines of 12px/1.35 plus 14px padding needs
       63px, so the third line was being sliced through the middle. Two lines
       come to 46px and end on a clean ellipsis. */
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
  }
  /* The stock overlay is a corner gradient at 0.3 alpha, which is not enough
     behind 12px white text. Darken the bottom of the tile only. */
  li.l-side-bottom-bnr__item .overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.18) 55%, rgba(0, 0, 0, 0) 100%);
  }
}
/* 480-767px: the tile is >=150px wide, so the title can go back up a step. */
@media screen and (min-width: 480px) and (max-width: 767px) {
  li.l-side-bottom-bnr__item .title {
    font-size: 14px;
  }
}

/* ===========================================================================
   [C] audit medium #22  touch-carousel-dots-under-24px  (the index.css half)
   Same pattern as top.css .custom-slider-pager .pager-dot: the <button> itself
   becomes the 24x24 target (WCAG 2.5.8) and the visible dot keeps its old size,
   drawn by a pseudo element. The top.css half (.p-ranking-list / .p-gallery__img)
   is handled in top.css, not here.
   =========================================================================== */

/* Side slider: index.css:433 makes the button itself the 10px dot. Empty the
   button out and redraw the dot with ::after. The `.slick-active` selector is
   repeated because index.css:440 (0,3,2) outranks a plain (0,2,3) rule. */
.l-side-slider ul.slick-dots li {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
}
.l-side-slider ul.slick-dots li button,
.l-side-slider ul.slick-dots li.slick-active button {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
/* slick-theme.css paints a bullet glyph in ::before; ours is ::after. */
.l-side-slider ul.slick-dots li button:before {
  display: none;
}
.l-side-slider ul.slick-dots li button:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d8d8d8;
}
.l-side-slider ul.slick-dots li.slick-active button:after {
  background: #2d2d2d;
}

/* Favourite carousel: index.css:1353 already draws the dot in ::before, so only
   the hit area grows and the 12px dot is re-centred (4px inset -> 6px inset,
   6 + 12 + 6 = 24). Colours and the active state are left untouched. The li
   margin (slick-theme's 0 5px) is left alone so the row keeps its rhythm. */
.c-slider-thema ul.slick-dots li {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
}
.c-slider-thema ul.slick-dots li button {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
}
.c-slider-thema ul.slick-dots li button:before {
  top: 6px;
  left: 6px;
}

/* ===========================================================================
   [D] audit medium #23  a11y-focus-ring-removed-on-cart  (WCAG 2.4.7 AA)
   index.css:1543 / 2051 / 2105 / 2555 all set outline:none with no keyboard
   condition. Put the ring back for :focus-visible only - a :focus fallback is
   deliberately NOT provided, because it would also fire on mouse clicks.
   =========================================================================== */

/* Header buttons sit on the white header ($headercolor, measured white), so a
   single #2d2d2d ring is 12.6:1 there. */
.l-sp-header-cart-btn__link:focus-visible,
.l-header-cart button:focus-visible,
.l-sp-header-search-btn__link:focus-visible {
  outline: 2px solid #2d2d2d;
  outline-offset: 2px;
}
/* The cart-in modal button is a solid #2169f3 face (index.css:2562) where
   #2d2d2d would only reach 2.9:1. Double ring instead: white drawn inside the
   button (4.8:1 against the blue) and a dark ring outside it, on the modal's
   white panel (12.6:1). The panel has 20px padding and no overflow:hidden, so
   the outer ring is not clipped. Re-declaring box-shadow also beats the
   `:hover, :focus { box-shadow:none }` rule at index.css:2567. */
.cart_in_modal__button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: -5px;
  box-shadow: 0 0 0 3px #2d2d2d;
}

/* ===========================================================================
   [E] audit medium #6  list-member-price-flat   (v1.0.1)
   index.css defines .c-item-list__off with a colour and nothing else, and gives
   .is-discount no rule at all, so a logged-in member sees no visual sign that a
   discount applied. The same class names are reused by the "favourites" and
   "recently viewed" blocks that index.html renders on EVERY page, so these two
   rules live here rather than in product_list.css / product_srh.css - keeping
   them page-local made the badge look different depending on the page.
   #9b2828 is 7.70:1 on white (AA).
   =========================================================================== */
.c-item-list__price.is-discount {
  color: #9b2828;
}
.c-item-list__off {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
  /* Without this the badge breaks mid-word ("10%O / FF") in the 165px card,
     because .c-item-list__item allows breaking anywhere. */
  white-space: nowrap;
}

/* ===========================================================================
   [F] audit low #4  color-photo-scrim   (v1.0.2)
   The side-banner titles are white text laid straight over an editorial photo.
   index.css only darkens the tile itself with a gradient, which cannot work
   here: .title_area is as tall as the tile (measured 73px of a 77px tile on a
   390px viewport, and 172px of a 158px tile at 1280px, where it overflows ABOVE
   the image onto the white page). On a light banner the first lines end up
   white-on-white - reproduced on the "Sita Rama" logo banner.

   So the scrim goes on the text block itself, where the text actually is.
   Worst case is a pure-white photo underneath; compositing black at alpha a
   over #ffffff gives 255*(1-a), so alpha 0.58 -> #6b6b6b -> 5.3:1 against
   white text, and the 0.72 end -> 3.6:1 ... no: 0.72 -> #474747 -> 9.0:1.
   Both ends clear the 4.5:1 needed for normal-size text, on ANY photo.
   text-shadow stays as a perceptual aid only - WCAG does not credit it.
   =========================================================================== */
.l-contents-side .title_area {
  box-sizing: border-box;
  padding: 6px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.58) 100%);
}
/* Keep the block inside the tile so it never lands on the page background.
   The tile is a 4:3 box (.image-container-4-3, padding-bottom:75%), so 70% of
   its height is the most the caption may take before it swallows the photo. */
.l-contents-side .title_area {
  top: auto;
  right: 0;
  left: 0;
  bottom: 0;
  max-height: 70%;
  overflow: hidden;
}
.l-contents-side .title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}