/* ============================================================
   Site chrome — the gallery wall on every page.
   ------------------------------------------------------------
   The homepage and shop each themed their own frame (header, footer,
   toolbar, page background) to the warm wall #f7f5f1. Every other page —
   product, cart, checkout, account, blog — kept WoodMart's default white
   header and, worse, a near-black page-title bar, so leaving the homepage
   dropped the visitor out of the gallery.

   This sheet carries the wall to the chrome of ALL front-end pages, so the
   frame around the content is one surface site-wide. It is deliberately only
   the frame: page bodies keep their own components (cart tables, checkout
   fields, blog cards). Checkout is themed here too, but only its outer wall
   and chrome — never the payment form or its komoju iframes.

   Colours mirror the homepage's day palette by literal value (this sheet
   loads site-wide, ahead of the page sheets, and must stand alone).
   ============================================================ */

/* ---- the wall reaches every page background ----
   background-image is cleared as well as the colour: the older boutique look
   still paints a tint gradient on body (radial) and on the wrapper (a five-hue
   linear), and a background-image sits over the colour, so clearing the colour
   alone left the gradient showing on pages the homepage/shop sheets don't cover
   (blog, archives, and so on). */
body.wp-theme-woodmart {
    background-color: #f7f5f1 !important;
    background-image: none !important;
}

body.wp-theme-woodmart .wd-page-wrapper.website-wrapper,
body.wp-theme-woodmart .main-page-wrapper {
    background-color: #f7f5f1 !important;
    background-image: none !important;
}

/* ---- header follows the wall (body-prefixed to clear WoodMart's own bg) ---- */
body.wp-theme-woodmart .whb-general-header,
body.wp-theme-woodmart .whb-mobile-header {
    background-color: #f7f5f1 !important;
    box-shadow: none !important;
}

body.wp-theme-woodmart .whb-general-header {
    border-bottom: none !important;
}

/* quiet the header navigation to the gallery's register on every page — smaller,
   wide-tracked, lighter. The homepage already reads this way; other pages showed
   WoodMart's default 13px/600/no-tracking, so the same links looked heavier and
   sat differently. These are the homepage's own values, lifted site-wide. */
body.wp-theme-woodmart .whb-header .wd-nav > li > a,
body.wp-theme-woodmart .whb-header .item-level-0 > a,
body.wp-theme-woodmart .whb-header .wd-tools-element .wd-tools-text {
    font-size: 11.5px !important;
    letter-spacing: 0.16em !important;
    font-weight: 400 !important;
}

/* ---- the phone bottom toolbar follows too, keeping an edge where it floats
        over content (matches the homepage/shop treatment) ---- */
body.wp-theme-woodmart .wd-toolbar {
    background-color: #f7f5f1 !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(27, 25, 23, 0.12) !important;
}

/* ---- the footer takes the wall on every page, as it already does on the
        homepage and shop. One wall on the footer element; every band inside it
        (widget row, its entry content, Elementor sections, the copyright bar)
        cleared to transparent so a single tone shows through instead of the
        theme's near-white footer. ---- */
body.wp-theme-woodmart footer,
body.wp-theme-woodmart .wd-footer,
body.wp-theme-woodmart .footer-container {
    background-color: #f7f5f1 !important;
    background-image: none !important;
    box-shadow: none !important;
}

body.wp-theme-woodmart footer .main-footer,
body.wp-theme-woodmart footer .min-footer,
body.wp-theme-woodmart footer .footer-sidebar,
body.wp-theme-woodmart footer .wd-footer-copyrights,
body.wp-theme-woodmart footer .copyrights-wrapper,
body.wp-theme-woodmart footer .wd-copyrights,
body.wp-theme-woodmart footer .elementor-element,
body.wp-theme-woodmart footer .elementor-section,
body.wp-theme-woodmart footer .wd-entry-content {
    background-color: transparent !important;
    background-image: none !important;
}

/* ---- the page-title bar: was near-black with light text, on every archive,
        the cart's checkout steps, and page titles. Bring it onto the wall as a
        quiet band framed by hairlines, and recolour its contents to read dark. */
body.wp-theme-woodmart .wd-page-title {
    background-color: #f7f5f1 !important;
    background-image: none !important;
    border-top: 1px solid rgba(27, 25, 23, 0.12);
    border-bottom: 1px solid rgba(27, 25, 23, 0.12);
}

/* WoodMart marks this bar color-scheme-light (light text for the dark bg); with
   the bg now light, every label in it — category links, checkout steps, the
   page title — has to turn dark to stay legible. */
body.wp-theme-woodmart .wd-page-title,
body.wp-theme-woodmart .wd-page-title a,
body.wp-theme-woodmart .wd-page-title span,
body.wp-theme-woodmart .wd-page-title li,
body.wp-theme-woodmart .wd-page-title .entry-title,
body.wp-theme-woodmart .wd-page-title .category-nav-link {
    color: #1b1917 !important;
}

body.wp-theme-woodmart .wd-page-title a:hover,
body.wp-theme-woodmart .wd-page-title .category-nav-link:hover {
    color: #5d4632 !important;
}

/* quiet the category navigation to the gallery's typographic register —
   smaller, wide-tracked, lighter — the way the homepage quiets its header nav */
body.wp-theme-woodmart .wd-page-title .wd-nav-product-cat > li > a {
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    font-weight: 400 !important;
}

/* ============================================================
   Mini-cart (slide-out) — the gallery register, not WoodMart green.
   The drawer opens on every page from the header cart icon, so it lives here in
   the global chrome: cream wall, brown prices, an ink checkout and an outlined
   view-cart. WoodMart drives the buttons through CSS custom properties, so the
   variables are overridden alongside the properties.
   ============================================================ */
.cart-widget-side {
    background-color: #f7f5f1 !important;
}

/* prices → brown; the struck-through original price stays muted */
.cart-widget-side .woocommerce-Price-amount,
.cart-widget-side .amount {
    color: #5d4632 !important;
}

.cart-widget-side del,
.cart-widget-side del .woocommerce-Price-amount,
.cart-widget-side del .amount {
    color: #6f665d !important;
}

.cart-widget-side .woocommerce-mini-cart__total {
    color: #1b1917 !important;
}

/* checkout → solid ink */
.cart-widget-side .woocommerce-mini-cart__buttons .checkout,
.cart-widget-side .buttons a.checkout {
    --btn-accented-bgcolor: #1b1917;
    --btn-accented-bgcolor-hover: #2d2924;
    --btn-accented-color: #f7f5f1;
    --btn-accented-color-hover: #f7f5f1;
    background-color: #1b1917 !important;
    color: #f7f5f1 !important;
    border: 1px solid #1b1917 !important;
    border-radius: 0 !important;
}

/* view-cart → outlined ink */
.cart-widget-side .woocommerce-mini-cart__buttons .button:not(.checkout),
.cart-widget-side .buttons a.btn-cart {
    --btn-bgcolor: transparent;
    --btn-bgcolor-hover: #1b1917;
    --btn-color: #1b1917;
    --btn-color-hover: #f7f5f1;
    --btn-bordercolor: #1b1917;
    background-color: transparent !important;
    color: #1b1917 !important;
    border: 1px solid #1b1917 !important;
    border-radius: 0 !important;
}

.cart-widget-side .woocommerce-mini-cart__buttons .button:not(.checkout):hover,
.cart-widget-side .buttons a.btn-cart:hover {
    background-color: #1b1917 !important;
    color: #f7f5f1 !important;
}

/* empty mini-cart drawer → the "買い物を続ける" button to ink (was WoodMart green).
   WoodMart's empty drawer markup: .wd-empty-mini-cart > a.btn.wc-backward. */
.wd-empty-mini-cart .btn {
    --btn-bgcolor: #1b1917;
    --btn-bgcolor-hover: #2d2924;
    --btn-accented-bgcolor: #1b1917;
    --btn-accented-bgcolor-hover: #2d2924;
    --btn-color: #f7f5f1;
    --btn-color-hover: #f7f5f1;
    background-color: #1b1917 !important;
    border-color: #1b1917 !important;
    color: #f7f5f1 !important;
    border-radius: 0 !important;
}

.wd-empty-mini-cart .btn:hover,
.wd-empty-mini-cart .btn:focus-visible {
    background-color: #2d2924 !important;
    border-color: #2d2924 !important;
    color: #f7f5f1 !important;
}

.wd-empty-mini-cart .woocommerce-mini-cart__empty-message {
    color: #6f665d !important;
}

/* ============================================================
   Header full-screen search overlay → cream wall, ink controls (not white)
   ============================================================ */
.wd-search-full-screen {
    background-color: #f7f5f1 !important;
}

.wd-search-full-screen .searchsubmit,
.wd-search-full-screen button[type="submit"] {
    background: transparent !important;
    color: #1b1917 !important;
    border-radius: 0 !important;
}

.wd-search-full-screen input.s,
.wd-search-full-screen input[type="search"] {
    color: #1b1917 !important;
    background: transparent !important;
    border-bottom-color: rgba(27, 25, 23, 0.2) !important;
}

.wd-search-full-screen input.s::placeholder {
    color: #6f665d !important;
}

/* ============================================================
   Login / register slide-out (.login-form-side) → the gallery register.
   It opens from the header account tool on every page, so it lives here in the
   global chrome alongside the mini-cart. WoodMart paints it white with a green
   submit and green links; bring it onto the cream wall with an ink button and
   ink links. Same variable-override pattern as the mini-cart buttons.
   ============================================================ */
.login-form-side {
    background-color: #f7f5f1 !important;
}

/* ログイン / 登録 submit → solid ink */
.login-form-side .woocommerce-form-login__submit,
.login-form-side .woocommerce-form-register__submit,
.login-form-side button[name="login"],
.login-form-side button[name="register"],
.login-form-side button[type="submit"] {
    --btn-bgcolor: #1b1917;
    --btn-bgcolor-hover: #2d2924;
    --btn-accented-bgcolor: #1b1917;
    --btn-accented-bgcolor-hover: #2d2924;
    --btn-color: #f7f5f1;
    --btn-color-hover: #f7f5f1;
    background-color: #1b1917 !important;
    color: #f7f5f1 !important;
    border: 1px solid #1b1917 !important;
    border-radius: 0 !important;
}

/* パスワードを忘れた方はこちら → quiet ink link, not green */
.login-form-side .lost_password,
.login-form-side .lost_password a,
.login-form-side a.woocommerce-LostPassword {
    color: #6f665d !important;
}

/* 新規アカウント作成 → outlined ink, drop the green underline */
.login-form-side .create-account-button {
    color: #1b1917 !important;
    border-color: #1b1917 !important;
    border-radius: 0 !important;
}

/* ============================================================
   Logged-in account dropdown (the "MY ACCOUNT" hover menu: ダッシュボード / 注文 /
   … / ログアウト) → cream wall, ink links, ink hover. WoodMart renders it white
   with green link hover; classes confirmed from the theme's own typography
   selectors (.wd-dropdown-my-account .wd-sub-menu li a).
   ============================================================ */
.wd-dropdown-my-account {
    background-color: #f7f5f1 !important;
    border: 1px solid rgba(27, 25, 23, 0.12) !important;
    box-shadow: 0 20px 40px -20px rgba(27, 20, 14, 0.25) !important;
    border-radius: 0 !important;
}

.wd-dropdown-my-account .wd-sub-menu li a {
    color: #3f3933 !important;
    font-family: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif !important;
}

.wd-dropdown-my-account .wd-sub-menu li a:hover,
.wd-dropdown-my-account .wd-sub-menu li.wd-active > a,
.wd-dropdown-my-account .wd-sub-menu li.current-item > a {
    color: #1b1917 !important;
    background-color: rgba(27, 25, 23, 0.05) !important;
}

/* ============================================================
   iOS Safari zoom guard — site-wide.
   ------------------------------------------------------------
   iOS Safari zooms the whole page in when a focused field has a font-size below
   16px, and frequently does not zoom back out afterwards (reported on the header
   search and the login drawer, whose fields were 14px). This is the global net:
   every text-entry control is floored at 16px on phones, so focusing never
   triggers the zoom. Phone width only (≤768px) — desktop sizing is untouched —
   and the value matches the per-page 16px guards already on cart / checkout /
   contact / account, so those are unaffected.
   ============================================================ */
@media (max-width: 768px) {
    body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="range"]):not([type="file"]):not([type="color"]),
    body select,
    body textarea {
        font-size: 16px !important;
    }
}

/* ============================================================
   Editorial hero — one shared height across pages.
   ------------------------------------------------------------
   The per-page hero blocks (contact / voices / blog / shop / wishlist) were
   given slightly different padding, margin and lead sizes, so the band's height
   varied page to page. Pin the box metrics here — this sheet loads site-wide, so
   it is the single source of truth — to make every hero identical. The kicker
   and rule are already the same in every page sheet, so only padding, margin and
   the lead font-size need unifying.
   ============================================================ */
.momoko-contact-hero,
.momoko-voices-hero,
.momoko-blog-hero,
.momoko-shop-hero,
.momoko-wishlist-hero {
    margin: 0 auto clamp(36px, 5vw, 58px) !important;
    padding: clamp(30px, 5vw, 60px) 0 0 !important;
}

.momoko-contact-lead,
.momoko-voices-lead,
.momoko-blog-lead,
.momoko-shop-lead,
.momoko-wishlist-lead {
    font-size: clamp(22px, 4vw, 34px) !important;
    line-height: 1.5 !important;
}

/* ============================================================
   Empty cart / checkout — editorial message + popular-works recommendations
   (rendered by momokoart_custom_empty_cart_content). Shown on both the cart and
   checkout empty states, so it lives in this site-wide chrome sheet.
   ============================================================ */
.momoko-empty-editorial {
    text-align: center;
    max-width: 560px;
    margin: 0 auto clamp(40px, 6vw, 64px);
    padding-top: clamp(16px, 4vw, 36px);
}

.momoko-empty-lead {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-weight: 400;
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #1b1917;
    margin: 0 0 20px;
}

.momoko-empty-rule {
    display: block;
    width: 44px;
    height: 2px;
    background: #b8935a;
    margin: 0 auto 24px;
}

.momoko-empty-sub {
    font-family: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
    font-size: 13.5px;
    line-height: 1.95;
    color: #6f665d;
    margin: 0;
}

.momoko-empty-recs {
    max-width: 1000px;
    margin: 0 auto;
}

.momoko-empty-recs-k {
    text-align: center;
    font-size: 10.5px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #b8935a;
    margin: 0 0 6px;
}

.momoko-empty-recs-h {
    text-align: center;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-weight: 400;
    font-size: 18px;
    color: #1b1917;
    letter-spacing: 0.04em;
    margin: 0 0 30px;
}

.momoko-empty-recs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px 24px;
}

.momoko-empty-rec {
    display: block;
    text-decoration: none;
    color: inherit;
}

.momoko-empty-rec-frame {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: visible;
    margin-bottom: 14px;
    text-align: center;
}

.momoko-empty-rec-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 18px 30px rgba(27, 20, 14, 0.22));
    transition: transform 0.4s ease;
}

.momoko-empty-rec:hover .momoko-empty-rec-frame img {
    transform: translateY(-5px);
}

.momoko-empty-rec-t {
    display: block;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: 14px;
    color: #1b1917;
    line-height: 1.5;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}

.momoko-empty-rec-p {
    display: block;
    font-family: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
    font-size: 12.5px;
    color: #5d4632;
    font-weight: 600;
}

/* the native "return to shop" button that follows → ink, centered under the recs */
body.woocommerce-cart .return-to-shop,
body.woocommerce-checkout .return-to-shop {
    text-align: center;
    margin-top: clamp(36px, 5vw, 52px);
}

body.woocommerce-cart .return-to-shop .button,
body.woocommerce-checkout .return-to-shop .button {
    --btn-bgcolor: #1b1917;
    --btn-bgcolor-hover: #2d2924;
    --btn-accented-bgcolor: #1b1917;
    --btn-accented-bgcolor-hover: #2d2924;
    background-color: #1b1917 !important;
    border-color: #1b1917 !important;
    color: #f7f5f1 !important;
    border-radius: 0 !important;
}

@media (max-width: 640px) {
    .momoko-empty-recs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Mobile menu drawer (the hamburger panel)
   ------------------------------------------------------------
   The last piece of chrome still wearing the theme's own dress: a
   white panel, links set in "Josefin Sans" — a Latin face with no
   Japanese glyphs, so every label silently fell back to Arial and
   read in a different type from the rest of the site — at weight
   600, separated by a grey rule drawn on each link's bottom border.
   Brought onto the cream wall with the site's own stack, the way the
   mini-cart and login drawers already are. Colour and type only; the
   menu's markup and behaviour are untouched.
   ============================================================ */
body.wp-theme-woodmart .mobile-nav.wd-side-hidden {
    background-color: #f7f5f1 !important;
    color: #3f3933;
}

body.wp-theme-woodmart .mobile-nav .woodmart-nav-link,
body.wp-theme-woodmart .mobile-nav .wd-nav-mobile a {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em;
    color: #3f3933 !important;
    border-bottom-color: rgba(27, 25, 23, 0.07) !important;
}

/* the page you are on. Marked with ink and a little weight rather than
   the brass accent: brass measures 2.43:1 on this wall, which would undo
   the contrast pass below. Ink-soft is 10.5:1, ink higher still. */
body.wp-theme-woodmart .mobile-nav .current-menu-item > .woodmart-nav-link,
body.wp-theme-woodmart .mobile-nav .current_page_item > .woodmart-nav-link {
    color: #1b1917 !important;
    font-weight: 500 !important;
}

/* the search row at the top of the panel — font-size is deliberately not
   set here, so the site-wide 16px iOS zoom guard keeps applying to it */
body.wp-theme-woodmart .mobile-nav .searchform input[type="search"],
body.wp-theme-woodmart .mobile-nav .searchform input[name="s"] {
    background-color: transparent !important;
    color: #1b1917 !important;
    border-bottom-color: rgba(27, 25, 23, 0.12) !important;
}

/* ============================================================
   Contrast — WCAG AA (4.5:1 for body text)
   ------------------------------------------------------------
   Measured against the live pages rather than guessed: eight footer
   links sat at 3.48:1 (#838383 on the cream wall) and the copyright
   line at 4.17:1 (#767676) — both under the 4.5:1 bar. Three more
   elements still carried WoodMart's accent green #99b998, which is
   2.15:1 against white: the "New" menu badge, and on mobile the nav
   text and the cart count. That green is also the last of the theme
   colour left in the chrome, so fixing the contrast finishes the
   repaint at the same time.

   Recoloured with the palette already in use in this file: #6f665d
   measures 5.16:1 on #f7f5f1, and ink is far above the bar. Colour
   only — nothing here moves, sizes or hides anything.
   ============================================================ */

/* footer links and copyright → the gallery's muted ink */
body.wp-theme-woodmart footer a,
body.wp-theme-woodmart .wd-footer a {
    color: #6f665d !important;
}

body.wp-theme-woodmart footer a:hover,
body.wp-theme-woodmart footer a:focus-visible,
body.wp-theme-woodmart .wd-footer a:hover,
body.wp-theme-woodmart .wd-footer a:focus-visible {
    color: #1b1917 !important;
}

body.wp-theme-woodmart footer .wd-copyrights,
body.wp-theme-woodmart footer .copyrights-wrapper {
    color: #6f665d !important;
}

/* the "New" menu badge: white on theme green (2.15:1) → cream on ink */
body.wp-theme-woodmart .menu-label-primary,
body.wp-theme-woodmart .menu-label.menu-label-primary {
    background-color: #1b1917 !important;
    color: #f7f5f1 !important;
}

/* Mobile header only — the desktop nav is already a dark grey and is left
   alone; it is the narrow layout that renders the link text and the cart
   count in the theme green. */
@media (max-width: 768px) {
    /* the colour is set on the link itself, not only on its .nav-link-text span:
       anything the link draws from currentColor — arrows, icons, underlines —
       would otherwise stay green while the label turned ink. */
    body.wp-theme-woodmart .woodmart-nav-link,
    body.wp-theme-woodmart .nav-link-text {
        color: #1b1917 !important;
    }

    body.wp-theme-woodmart .wd-cart-number,
    body.wp-theme-woodmart .wd-tools-count {
        background-color: #1b1917 !important;
        color: #f7f5f1 !important;
    }
}

/* ============================================================
   Announcement — "ポスター" (a floating artwork card, bottom-left)
   ------------------------------------------------------------
   Our own notice (includes/announcement.php prints it on wp_body_open;
   the copy, image and on/off live in 設定 → お知らせバー). The whole
   card is the chosen artwork; the message sits over a dark gradient at
   its foot, so it reads on any image, light or dark.

   Fixed to the lower-left corner, not the top: the header follows and
   shrinks on scroll and a mobile toolbar owns the bottom edge, so the
   corner clears both. Held hidden by the --pending class and revealed by
   the inline script on window.load, so it never touches first paint; the
   image is applied only then, so it is not fetched before load.
   ============================================================ */
.momoko-annc {
    position: fixed;
    left: 20px;
    bottom: 24px;
    z-index: 340; /* under the mobile toolbar (350) and modals */
    width: 248px;
    max-width: calc(100vw - 40px);
    aspect-ratio: 300 / 424;
    overflow: hidden;
    box-shadow:
        0 36px 70px -26px rgba(27, 20, 14, 0.5),
        0 12px 30px -14px rgba(27, 20, 14, 0.3);
    background: #0f1420;
    opacity: 1;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* held state — set at print time, removed on window.load */
.momoko-annc.momoko-annc--pending {
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
}

/* a text-only notice (no artwork) is a short dark card, not a tall poster */
.momoko-annc.momoko-annc--noimg {
    aspect-ratio: auto;
}

.momoko-annc-face {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    color: inherit;
}

.momoko-annc--noimg .momoko-annc-face {
    position: relative;
}

.momoko-annc-img {
    position: absolute;
    inset: 0;
    display: block;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* clear at the top, dark at the foot — legible over any artwork */
.momoko-annc-scrim {
    position: absolute;
    inset: 0;
    display: block;
    background: linear-gradient(
        to bottom,
        rgba(10, 14, 22, 0) 38%,
        rgba(10, 14, 22, 0.55) 66%,
        rgba(10, 14, 22, 0.9) 100%
    );
}

.momoko-annc--noimg .momoko-annc-scrim {
    display: none;
}

.momoko-annc-copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 16px 18px 17px;
    z-index: 2;
}

.momoko-annc--noimg .momoko-annc-copy {
    position: relative;
    padding: 18px 20px 19px;
}

.momoko-annc-label {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.30em;
    text-transform: uppercase;
    color: #e6cf9a;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.momoko-annc-rule {
    display: block;
    width: 24px;
    height: 1px;
    background: #b8935a;
    margin: 9px 0 11px;
}

.momoko-annc-msg {
    display: block;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    font-size: 14px;
    line-height: 1.8;
    letter-spacing: 0.03em;
    color: #ffffff;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.7), 0 0 2px rgba(0, 0, 0, 0.5);
}

.momoko-annc-msg em,
.momoko-annc-msg strong,
.momoko-annc-msg b {
    font-style: normal;
    font-weight: 600;
    font-size: 1.12em;
    letter-spacing: 0.04em;
    color: #f0c675;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6), 0 0 3px rgba(240, 198, 117, 0.3);
}

.momoko-annc-btn {
    display: inline-block;
    margin-top: 11px;
    font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    color: #ffffff;
    border-bottom: 1px solid #b8935a;
    padding-bottom: 2px;
    transition: color 0.25s ease;
}

.momoko-annc-face:hover .momoko-annc-btn {
    color: #f4d79a;
}

/* WoodMart styles every <button> — grey fill, min-width, its own position — with
   !important, which took this control over (it turned into a grey box). It is
   reset to a bare control here, and the × itself is drawn as two thin white
   lines (::before / ::after) rather than a font glyph, so it matches the design
   exactly: a fine hairline cross, not a heavy character. */
.momoko-annc .momoko-annc-close {
    position: absolute !important;
    right: 5px !important;
    left: auto !important;
    top: 5px !important;
    bottom: auto !important;
    z-index: 3;
    width: 24px !important;
    min-width: 0 !important;
    height: 24px !important;
    min-height: 0 !important;
    max-height: 24px !important;
    background: none !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    line-height: 0 !important;
    cursor: pointer;
    opacity: 0.85;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    appearance: none;
    transition: opacity 0.25s ease;
}

/* the × — two thin lines crossed, centred in the tap target. Small and fine,
   exactly as the design draft: 14px lines, 1px thick. */
.momoko-annc .momoko-annc-close::before,
.momoko-annc .momoko-annc-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 1px;
    background: #ffffff;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.momoko-annc .momoko-annc-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.momoko-annc .momoko-annc-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.momoko-annc .momoko-annc-close:hover,
.momoko-annc .momoko-annc-close:focus-visible {
    opacity: 1;
}

/* screen-reader-only label inside the close button */
.momoko-annc .momoko-annc-close .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.momoko-annc-face:focus-visible,
.momoko-annc-close:focus-visible {
    outline: 2px solid #b8935a;
    outline-offset: 2px;
}

/* Mobile: a smaller poster, and clear of the fixed toolbar (55px). */
@media (max-width: 768px) {
    .momoko-annc {
        left: 12px;
        bottom: 66px;
        width: 150px;
    }

    .momoko-annc-copy {
        padding: 12px 13px 13px;
    }

    .momoko-annc-msg {
        font-size: 12px;
        line-height: 1.65;
    }

    .momoko-annc-label {
        font-size: 8.5px;
        letter-spacing: 0.24em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .momoko-annc {
        transition: opacity 0.4s ease;
    }

    .momoko-annc.momoko-annc--pending {
        transform: none;
    }
}