/* Agentic Store base styles.
   Theme tokens follow the top page spec: warm stone paper, soft ink,
   one deep teal accent. Changing the theme means changing these variables. */
:root {
    --paper: #FAF8F4;
    --ink: #232825;
    --accent: #0F766E;
    --accent-dark: #084C46;
    --accent-tint: #E6F4F1;
    --muted: #6F6A5E;
    --muted-strong: #5C574C;
    --amber: #D97706;
    --line: #E5E0D8;
    --surface: #FFFFFF;
    --tint: #F6F3EE;
    --tint-strong: #EDE9E1;
    --danger: #B91C1C;
    --danger-bg: #FDECEC;
    --danger-line: #E5A3A3;
    --disabled: #CFC9BC;
    --shadow-sm: 0 1px 3px rgba(35, 40, 37, 0.05);
    --shadow-md: 0 10px 24px rgba(35, 40, 37, 0.10);
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 14px;
    --r-pill: 999px;
    --focus-ring: 0 0 0 3px rgba(15, 118, 110, 0.15);
    --wrap: 1200px;
}

/* Every image stays inside its container; components layer
   their own aspect-ratio and fit rules on top of this floor. */
img {
    max-width: 100%;
    height: auto;
}

body {
    margin: 0;
    /* Sticky footer: the page is a full-height column and main
       grows, so the footer stays at the bottom of the window even
       on pages with little content. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--paper);
    color: var(--ink);
    font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
}

/* Links: the theme default. An anchor no component claims is
   teal and never underlined, visited looks the same as
   unvisited, and hover underlines - so body-text links (the
   sign-up consent links, the keyword links on the empty search
   page, the guest-cart login link, the mypage order-detail
   link) match the stone/teal theme instead of the browser's
   default blue/purple. Component rules override this by
   specificity; the guards below keep the logo, nav and
   button-links from picking up the visited colour or the
   hover underline. */
a {
    color: var(--accent);
    text-decoration: none;
}

a:visited {
    color: var(--accent);
}

a:hover {
    text-decoration: underline;
}

.site-logo:visited,
.nav-link:visited {
    color: var(--ink);
}

.primary-button:visited,
.nav-button:visited,
.add-cart-button:visited {
    color: var(--surface);
}

.agent-button:visited {
    color: var(--paper);
}

.site-logo:hover,
.nav-link:hover,
.primary-button:hover,
.secondary-button:hover,
.nav-button:hover,
.add-cart-button:hover,
.agent-button:hover {
    text-decoration: none;
}


/* Modern sticky header: translucent paper, soft shadow, pill nav. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--line);
    background-color: rgba(250, 248, 244, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 12px rgba(35, 40, 37, 0.06);
}

.site-header-inner {
    max-width: calc(var(--wrap) + 240px);
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.site-logo {
    color: var(--ink);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.12em;
    transition: color 0.15s ease;
}

.site-logo:hover {
    color: var(--accent);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.nav-link {
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
    padding: 10px 12px;
    border-radius: var(--r-pill);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link:hover {
    background-color: var(--accent);
    color: var(--surface);
}

.nav-link-icon {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.nav-icon {
    width: 18px;
    height: 18px;
    flex: none;
}

.nav-button {
    background-color: var(--accent);
    color: var(--surface);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--r-pill);
    margin-left: 6px;
    transition: background-color 0.15s ease;
}

.nav-button:hover {
    background-color: var(--accent-dark);
}

/* The coupon band sits directly below the header, per the top
   page spec: a full-width promo band whose message and discount
   pill sit together as one centred group. */
.coupon-band {
    background-color: var(--amber);
    color: var(--surface);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    padding: 8px 20px;
    font-size: 14px;
}

.coupon-band-message {
    min-width: 0;
}

.coupon-band-amount {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background-color: rgba(255, 255, 255, 0.18);
    font-size: 15px;
    font-weight: 700;
}

/* The announcement bar (CMS C-3): the operator's general
   message, rendered at the head of the top page's content
   while its slot is live. The accent band, distinct from the band's
   promo colour so the two never read as one message. */
.announcement-bar {
    background-color: var(--accent);
    color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 20px;
    font-size: 14px;
}

.announcement-link,
.announcement-link:visited {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 2px 10px;
    border-radius: var(--r-pill);
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--surface);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.announcement-link:hover {
    text-decoration: underline;
}

main {
    flex: 1 0 auto;
    width: 100%;
    box-sizing: border-box;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 24px 20px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.site-footer {
    border-top: 1px solid var(--line);
    font-size: 13px;
}

.category-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.category-nav a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding: 6px 2px;
    font-size: 14px;
}

.category-nav a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.hero {
    padding: 44px 36px;
    margin-top: 24px;
    background-color: var(--tint);
    border-radius: var(--r-xl);
}

.hero p {
    color: var(--muted);
    max-width: 640px;
    line-height: 1.8;
}

@media (max-width: 640px) {
    .hero {
        padding: 28px 20px;
    }
}

.hero h1 {
    font-size: 32px;
    margin: 0 0 12px;
}

/* The hero's slides: a full-width band cropped to a wide
   ratio so any uploaded image keeps the same shape;
   narrower on phones, where a 21:9 strip would shrink to
   nothing. The headline and subtext overlay the band's
   lower left over a scrim, and each slide is its own link
   (the hero has no button): the slides stack and crossfade
   on a timer (app.js), with dots to jump; a single image
   renders as the plain band. */
.hero-slider {
    position: relative;
    aspect-ratio: 21 / 9;
    border-radius: var(--r-xl);
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

img.hero-slide,
.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-slide.is-active {
    opacity: 1;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 56px 28px 34px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
    pointer-events: none;
}

.hero-overlay h1 {
    color: #fff;
    margin: 0 0 8px;
}

.hero-overlay p {
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 640px;
    line-height: 1.8;
}

.hero-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.hero-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}

.hero-dot.is-active {
    background: #fff;
}

@media (max-width: 640px) {
    .hero-slider {
        aspect-ratio: 16 / 9;
    }

    .hero-overlay {
        padding: 40px 16px 30px;
    }

    .hero-overlay h1 {
        font-size: 24px;
    }
}

.badges {
    min-height: 22px;
    margin-top: 8px;
}

.badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 6px;
}

.badge.promo {
    background-color: var(--amber);
    color: var(--surface);
}

.badge.state {
    background-color: var(--ink);
    color: var(--surface);
}

.badge.agent {
    background-color: var(--teal);
    color: var(--surface);
}

.rating {
    margin: 4px 0;
    font-size: 14px;
}

/* The free-space strip is the one dark block on the page, per the top page spec. */
.free-space-strip {
    background-color: var(--ink);
    color: var(--paper);
    border-radius: var(--r-lg);
    padding: 28px;
    margin: 40px 0 0;
}

.agent-button {
    display: inline-block;
    margin-top: 10px;
    border: 1px solid var(--paper);
    border-radius: var(--r-sm);
    padding: 8px 18px;
    font-size: 14px;
    color: var(--paper);
    text-decoration: none;
}

.feature-banner {
    text-align: center;
    margin: 40px 0 0;
}

.feature-banner a {
    color: var(--accent);
    font-weight: 700;
}

/* The quiet "view all" link under a home section's grid,
   leading to the section's own page. */
.section-more {
    text-align: right;
    margin: 12px 0 0;
}

.section-more a {
    color: var(--accent);
    font-weight: 700;
}

.news ul {
    list-style: none;
    padding: 0;
}

.news li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.news time {
    color: var(--accent);
    margin-right: 12px;
}

.news-title {
    font-weight: 700;
}

.section-note {
    font-size: 14px;
}

/* Auth pages: sign-up, login, mypage. */
.auth-page {
    max-width: 560px;
    margin: 0 auto;
}

.auth-form label {
    display: block;
    margin: 14px 0;
    font-size: 14px;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form input[type="tel"],
.auth-form input[type="date"],
.auth-form select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 16px;
    background-color: var(--surface);
}

.field-row {
    display: flex;
    gap: 16px;
}

.field-row label {
    flex: 1;
}

.checkbox-label {
    font-size: 14px;
}

.primary-button {
    background-color: var(--accent);
    color: var(--surface);
    text-decoration: none;
    border: 1px solid var(--accent);
    border-radius: var(--r-md);
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.15s ease;
}

.primary-button:hover {
    background-color: var(--accent-dark);
}

/* Destructive actions (Phase 4): a filled danger button for
   the final irreversible confirm (withdraw, order cancel,
   address delete), an outline danger modifier for serious
   in-place actions (TOTP disable, SNS unlink, recovery-code
   regeneration). Colours come from the danger tokens. */
.danger-button {
    background-color: var(--danger);
    color: var(--surface);
    text-decoration: none;
    border: 1px solid var(--danger);
    border-radius: var(--r-md);
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 10px;
    transition: background-color 0.15s ease;
}

.danger-button:hover {
    background-color: #991B1B;
}

.secondary-button.danger {
    color: var(--danger);
    border-color: var(--danger-line);
}

.secondary-button.danger:hover {
    background-color: var(--danger-bg);
}

/* A disabled primary button (the all-off-sale cart's checkout
   call to action, SF-8): the sold-out fill the add-to-cart button
   uses, with no shadow and no pointer affordance - visibly inert,
   not a link that bounces. */
.primary-button:disabled {
    background-color: var(--disabled);
    box-shadow: none;
    cursor: default;
}

/* Paired buttons sit in a .form-actions flex row: the base
   primary-button margin-top (kept for standalone buttons in
   plain flow) would push one of the pair down inside the
   centered row and read as a height difference, so buttons
   inside an actions row are margin-free. */
.form-actions .primary-button {
    margin-top: 0;
}

.form-error {
    background-color: var(--danger-bg);
    border: 1px solid var(--danger-line);
    color: var(--danger);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    font-size: 14px;
}

.form-notice {
    background-color: var(--accent-tint);
    border: 1px solid var(--accent);
    color: var(--ink);
    border-radius: var(--r-sm);
    padding: 10px 14px;
    font-size: 14px;
}

.code-input {
    letter-spacing: 0.4em;
    font-size: 22px;
    text-align: center;
}

.confirm-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: 14px;
}

.confirm-table th {
    text-align: left;
    width: 35%;
    padding: 10px;
    border-bottom: 1px solid var(--line);
    background-color: var(--surface);
}

.confirm-table td {
    padding: 10px;
    border-bottom: 1px solid var(--line);
}

.flash-message {
    background-color: var(--accent);
    color: var(--surface);
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
}

.header-greeting {
    font-size: 13px;
    color: var(--muted);
    margin-right: 4px;
}

.logout-form {
    display: inline-flex;
    margin: 0;
}

/* Account menu: on wide screens the wrapper and panel are
   transparent (display: contents) and the toggle is hidden,
   so the account links lay out in the nav exactly as before.
   The mid-width block below (max-width: 1420px) turns the
   wrapper into the dropdown's anchor and the toggle into the
   visible account icon. The
   home icon inside the logo is phone-only the same way. */
.account-menu,
.account-panel {
    display: contents;
}

.account-toggle {
    display: none;
}

.logo-home-icon {
    display: none;
}

/* Logout is a button styled as a nav link, icon included. */
.link-button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

/* Required and optional marks on form labels (Japanese EC convention):
   a red badge on required items, a grey badge on optional ones. */
.badge-required {
    display: inline-block;
    background-color: var(--danger);
    color: var(--surface);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

.badge-optional {
    display: inline-block;
    background-color: #9A958A;
    color: var(--surface);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

/* A server side validation message, shown under its own field. */
.field-error {
    color: var(--danger);
    font-size: 13px;
    margin: 4px 0 0;
}

/* Header search box (Product Search Spec): between logo and nav on
   desktop, a full-width second row below 720px. */
.search-form {
    position: relative;
    display: flex;
    flex: 1;
    max-width: 346px;
    margin: 0 16px;
}

.search-input {
    flex: 1;
    min-width: 0;
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-pill) 0 0 var(--r-pill);
    font-size: 14px;
    background-color: var(--surface);
}

.search-button {
    background-color: var(--accent);
    color: var(--surface);
    border: none;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 18px;
    border-radius: 0 var(--r-pill) var(--r-pill) 0;
    cursor: pointer;
}

.search-button:hover {
    background-color: var(--accent-dark);
}

.search-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
}

.suggest-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: 0 8px 24px rgba(35, 40, 37, 0.12);
}

.suggest-list a {
    display: block;
    padding: 12px 14px;
    color: var(--ink);
    text-decoration: none;
    font-size: 14px;
}

.suggest-list a:hover {
    background-color: var(--tint);
    color: var(--accent);
}

/* Mid widths (a laptop window, DevTools docked): the account
   links move behind the account icon's dropdown panel - the
   phone pattern - so the logo, search, cart and agent keep
   one header row instead of wrapping onto two. The greeting
   stays beside the icon. */
@media (max-width: 1420px) {
    .account-menu {
        display: block;
        position: relative;
    }

    .account-toggle {
        display: inline-flex;
        align-items: center;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--ink);
        font-size: 0;
        padding: 8px;
        border-radius: var(--r-pill);
    }

    .account-toggle .nav-icon {
        width: 22px;
        height: 22px;
    }

    .account-toggle[aria-expanded="true"] {
        background-color: var(--accent-tint);
        color: var(--accent);
    }

    .account-panel {
        display: none;
        position: absolute;
        right: 0;
        top: calc(100% + 8px);
        min-width: 216px;
        padding: 8px;
        background-color: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-md);
        z-index: 120;
    }

    .account-panel.open {
        display: block;
    }

    .account-panel .nav-link {
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
        padding: 12px;
        border-radius: var(--r-md);
    }

    .account-panel .logout-form {
        display: block;
    }

    .account-panel .link-button {
        color: var(--ink);
        font-size: 14px;
        justify-content: flex-start;
    }

    .account-panel .nav-button {
        display: block;
        text-align: center;
        margin: 4px 0 0;
        padding: 12px;
    }
}

/* Overflow rule for the header: below the width where logo,
   search and nav fit side by side, the search drops to its
   own full-width row under the logo/nav row - the same
   pattern as the phone layout below - instead of squeezing
   the row or parking the search above the nav. */
@media (max-width: 1000px) {
    .search-form {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        margin: 4px 0 0;
    }
}

@media (max-width: 720px) {
    /* Smartphone header, the modern EC pattern: row 1 is the logo
       and icon-only actions (no wrapping text links), row 2 is the
       full-width search box. The greeting moves off the header;
       it still shows on the member page. */
    .site-header-inner {
        flex-wrap: wrap;
        /* Compact phone stack: the three wrapped rows (logo,
           actions, search) share tighter vertical padding and
           row gaps so content starts higher. Nothing is hidden;
           every row keeps its full tap height. */
        padding: 8px 20px;
        gap: 8px 12px;
    }

    .site-logo {
        font-size: 16px;
    }

    .site-nav {
        flex-wrap: nowrap;
        gap: 2px;
    }

    .header-greeting {
        display: none;
    }

    .nav-link-icon {
        font-size: 0;
        padding: 8px;
    }

    .nav-link-icon .nav-icon {
        width: 22px;
        height: 22px;
    }

    .nav-button {
        padding: 8px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .search-form {
        order: 3;
        flex-basis: 100%;
        max-width: none;
        margin: 4px 0 0;
    }

    .search-input {
        padding: 7px 14px;
    }

    .search-button {
        padding: 7px 18px;
    }

    /* Phone header shape: a home icon joins the wordmark in
       the logo. Cart and the agent stay visible in the row;
       search and the menu row are unchanged. */
    .site-logo {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 8px;
        /* One single header row: the brand pair never wraps
           onto its own line — the wordmark tightens instead
           (15px, narrower tracking) so the pair and the icon
           group share the row down to ~360px widths. */
        flex: none;
        white-space: nowrap;
        font-size: 15px;
        letter-spacing: 0.06em;
    }

    .site-nav {
        flex: none;
    }

    .logo-home-icon {
        display: block;
        width: 24px;
        height: 24px;
    }

    /* The band sits in the same first-screen stack as the
       header: slightly tighter padding and wrap gap on phones,
       text and discount pill fully intact. */
    .coupon-band {
        padding: 6px 20px;
        gap: 6px;
    }
}

/* Search results page. */
.search-tools {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin: 16px 0 24px;
}

.search-tools select {
    padding: 8px;
    font-size: 14px;
    margin-top: 4px;
    display: block;
}

.secondary-button {
    background-color: var(--surface);
    color: var(--accent);
    text-decoration: none;
    border: 1px solid var(--accent);
    border-radius: var(--r-md);
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.secondary-button:hover {
    background-color: var(--accent);
    color: var(--surface);
}

.result-count {
    color: var(--muted);
    font-size: 14px;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 28px 0 8px;
    font-size: 14px;
}

.pagination a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

/* Recent searches header row inside the suggestion dropdown. */
.suggest-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    font-size: 12px;
    color: var(--muted);
}

.suggest-clear {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 12px;
    padding: 0;
}

/* Header cart badge: teal pill with the total cart quantity. */
.cart-badge {
    background-color: var(--accent);
    color: var(--surface);
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--r-pill);
    padding: 1px 7px;
    margin-left: 2px;
}

/* Add-to-cart button on cards and the detail page. */
.card-cart {
    margin-top: 10px;
}

.add-cart-button {
    /* Flex so the anchor form of this class (the variant
       card's 選択する) lays out exactly like the button
       form: full card width, centred label. An anchor is
       inline by default, which ignored the width and
       shrank the pill to its text. */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--accent);
    color: var(--surface);
    border: none;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: var(--r-pill);
    cursor: pointer;
}

.add-cart-button:hover:not(:disabled) {
    background-color: var(--accent-dark);
}

.add-cart-button:disabled {
    background-color: var(--disabled);
    cursor: default;
}

/* Cart page. */
.cart-lines {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.cart-line {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
}

.cart-line-out {
    opacity: 0.75;
}

.cart-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--r-sm);
}

/* An imageless product's cart cell keeps the thumbnail's
   footprint as an empty frame (its product was edited to a
   draft without images after the line was added). */
.cart-thumb-none {
    border: 1px dashed var(--line);
    box-sizing: border-box;
}

.cart-line-info {
    flex: 1;
    min-width: 160px;
}

.cart-line-name {
    margin: 0 0 4px;
    font-weight: 600;
}

.cart-line-name a {
    color: var(--ink);
    text-decoration: none;
}

.cart-line-price {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
}

.cart-line-qty {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cart-line-qty form {
    margin: 0;
}

.stepper-button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    background-color: var(--surface);
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
}

.stepper-button:disabled {
    opacity: 0.4;
    cursor: default;
}

.qty-value {
    min-width: 24px;
    text-align: center;
    font-weight: 600;
}

.cart-line-total {
    font-weight: 700;
    min-width: 90px;
    text-align: right;
    margin: 0;
}

.text-button {
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
}

.totals-grand {
    border-top: 1px solid var(--line);
    font-size: 16px !important;
}

.totals-grand dd {
    color: var(--accent);
}

.cart-actions {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.cart-actions a {
    text-decoration: none;
    text-align: center;
    flex: 1;
}

/* Checkout pages. */
.checkout-lines {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.checkout-lines li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.payment-box {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    max-width: 480px;
}

.confirm-list {
    margin: 0 0 8px;
}

.confirm-list > div {
    display: flex;
    gap: 16px;
    padding: 6px 0;
    font-size: 14px;
}

.confirm-list dt {
    color: var(--muted);
    min-width: 110px;
}

.confirm-list dd {
    margin: 0;
}

.field-pair {
    display: flex;
    gap: 10px;
}

.field-pair input {
    flex: 1;
    min-width: 0;
}

/* The group caption over a paired field (the checkout name
   pair): styled like the form's own labels. */
.field-label {
    display: block;
    font-size: 14px;
}

/* Keyboard focus stays visible in the theme accent; mouse
   focus keeps the browser default. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
    flex-wrap: wrap;
    align-items: center;
}

.form-actions a {
    text-decoration: none;
}

.order-history {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.coupon-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}

.coupon-item {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
}

.mypage-coupon-code {
    font-weight: 700;
}

.order-history li {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    flex-wrap: wrap;
}

.order-history .order-number {
    font-weight: 700;
}

/* The star bar: a clipped five-star fill shared by the
   storefront and the admin surface — one widget, two surfaces,
   so its CSS lives in this sheet, which both layouts load. */
.stars-display {
    position: relative;
    display: inline-block;
    font-size: 19px;
    line-height: 1;
    letter-spacing: 2px;
}

.stars-display .stars-bg {
    color: #D8D2C4;
}

.stars-display .stars-fg {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    white-space: nowrap;
    color: var(--accent);
}

.stars-sm {
    font-size: 15px;
    letter-spacing: 2.5px;
}

/* Product detail page. */
.breadcrumb {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 18px;
}

.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.detail-main {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.detail-image {
    flex: 1;
    min-width: 260px;
}

.detail-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.detail-thumb {
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--r-sm);
    background: none;
    cursor: pointer;
}

.detail-thumb.is-active {
    border-color: var(--accent);
}

.detail-image .detail-thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.detail-buy {
    flex: 1;
    min-width: 260px;
}

.detail-buy h1 {
    margin: 8px 0;
}

.detail-price {
    font-size: 24px;
}

.stock-label {
    font-weight: 700;
    color: var(--accent);
}

.qty-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.qty-input {
    width: 64px;
    text-align: center;
    padding: 8px 4px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 15px;
}

.product-description {
    white-space: pre-line;
    max-width: 720px;
    line-height: 1.8;
}

.product-detail h2 {
    margin-top: 28px;
}

/* Address book (mypage list + checkout picker): saved-address
   cards in the same bordered-card language as the order cards. */
.address-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.address-card {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 14px 16px;
    background: var(--surface);
}
.address-name {
    font-weight: 700;
    margin: 0 0 6px;
}
.address-body {
    margin: 0;
    line-height: 1.65;
}
.address-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin: 12px 0 0;
}
.inline-form {
    display: inline;
}
.checkbox-row {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 400;
}
.picker-card {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    padding: 12px 14px;
    margin: 0 0 10px;
    background: var(--surface);
    cursor: pointer;
}
.picker-card input {
    margin-right: 8px;
}

/* Contact honeypot: off-screen, never display:none (bots
   check), invisible and unreachable for humans. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Product tags on the detail page: small linked pills that
   lead to the tag-filtered listing. */
.tag-chip {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    border: 1px solid var(--accent);
    border-radius: var(--r-pill);
}