/*
Theme Name: neko-select
Theme URI: https://neko-select.com
Template: swell
Description: SWELL子テーマ — neko-select.com 猫グッズ通販
Author: neko-select
Version: 1.0.0
*/

/* ============================================================
   CSS Variables
   ============================================================ */
:root {
    --nk-cream:    #faf6f1;
    --nk-warm:     #f5ede4;
    --nk-white:    #ffffff;
    --nk-rose:     #c4868e;
    --nk-rose-soft:#f0d5d8;
    --nk-rose-pale:#fdf5f6;
    --nk-brown:    #4a3a2b;
    --nk-brown-md: #7a6a5a;
    --nk-brown-lt: #a09080;
    --nk-camel:    #d4956a;
    --nk-camel-dk: #b87a52;
    --nk-gold:     #e8b84e;
    --nk-green:    #7ea07e;
    --nk-border:   #e8ddd3;
    --nk-sh:       rgba(74,58,43,0.08);
    --nk-sh-md:    rgba(74,58,43,0.13);
    --nk-r:        16px;
    --nk-mw:       1200px;
    --nk-f:        'Zen Maru Gothic', 'Noto Sans JP', sans-serif;
    --nk-fb:       'Noto Sans JP', sans-serif;
}

/* ============================================================
   Common
   ============================================================ */
.neko-inner {
    max-width: var(--nk-mw);
    margin: 0 auto;
    padding: 0 24px;
}

.neko-sec-hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.neko-sec-title {
    font-family: var(--nk-f);
    font-size: 22px;
    font-weight: 700;
    color: var(--nk-brown);
}

.neko-sec-link {
    font-size: 13px;
    color: var(--nk-rose);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.3s;
    text-decoration: none !important;
}
.neko-sec-link:hover {
    gap: 8px;
    color: var(--nk-rose);
}

/* Placeholder image */
.neko-ph-img {
    width: 100%;
    height: 100%;
    background: var(--nk-warm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nk-brown-lt);
    font-size: 28px;
}

/* ============================================================
   Trust Bar
   ============================================================ */
.neko-tb {
    background: var(--nk-brown);
    color: rgba(255,255,255,0.85);
    font-size: 11px;
    padding: 7px 0;
    text-align: center;
    letter-spacing: 0.02em;
}
.neko-tb-in {
    display: flex;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}
.neko-tb i {
    margin-right: 5px;
    color: var(--nk-camel);
}

/* ============================================================
   Scroll Arrows (shared)
   ============================================================ */
.neko-scroll-wrap {
    position: relative;
}

.neko-scroll-arr {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--nk-white);
    border: 1px solid var(--nk-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--nk-brown-md);
    cursor: pointer;
    box-shadow: 0 2px 12px var(--nk-sh);
    transition: all 0.25s;
    z-index: 10;
    opacity: 0.9;
}
.neko-scroll-arr:hover {
    background: var(--nk-rose-pale);
    color: var(--nk-rose);
    border-color: var(--nk-rose);
    box-shadow: 0 4px 16px var(--nk-sh-md);
    opacity: 1;
}
.neko-arr-l { left: -16px; }
.neko-arr-r { right: -16px; }
.neko-scroll-arr.hidden {
    opacity: 0;
    pointer-events: none;
}

.neko-scrollable {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.neko-scrollable::-webkit-scrollbar { height: 3px; }
.neko-scrollable::-webkit-scrollbar-thumb {
    background: var(--nk-border);
    border-radius: 3px;
}

/* ============================================================
   Categories
   ============================================================ */
.neko-cats {
    padding: 64px 0;
    background: var(--nk-white);
}

.neko-cat-scroll {
    gap: 16px;
    padding-bottom: 8px;
}

.neko-cc {
    flex: 0 0 120px;
    scroll-snap-align: start;
    background: var(--nk-cream);
    border-radius: var(--nk-r);
    padding: 20px 10px 16px;
    text-align: center;
    transition: all 0.3s;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    color: var(--nk-brown);
}
.neko-cc:hover {
    border-color: var(--nk-rose);
    background: var(--nk-rose-pale);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--nk-sh);
    color: var(--nk-rose);
}

.neko-cc-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 10px;
    background: var(--nk-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 2px 8px var(--nk-sh);
    transition: all 0.3s;
    overflow: hidden;
    color: var(--nk-brown-lt);
}
.neko-cc-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.neko-cc:hover .neko-cc-icon {
    box-shadow: 0 4px 12px rgba(196,134,142,0.25);
    transform: scale(1.08);
}

.neko-cc-name {
    font-size: 11px;
    font-weight: 600;
    transition: color 0.3s;
    margin-top: 2px;
}

/* ============================================================
   Pickup
   ============================================================ */
.neko-pickup {
    padding: 64px 0;
    background: var(--nk-cream);
}

.neko-pickup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.neko-pu-card {
    background: var(--nk-white);
    border-radius: var(--nk-r);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--nk-border);
    transition: all 0.3s;
    text-decoration: none !important;
    color: var(--nk-brown);
}
.neko-pu-card:hover {
    box-shadow: 0 12px 40px var(--nk-sh-md);
    transform: translateY(-4px);
    color: var(--nk-brown);
}

.neko-pu-img {
    min-height: 240px;
    position: relative;
    overflow: hidden;
}
.neko-pu-img img.neko-pu-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}
.neko-pu-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--nk-camel);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    z-index: 2;
}

.neko-pu-body {
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.neko-pu-cat {
    font-size: 11px;
    color: var(--nk-brown-lt);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.neko-pu-name {
    font-family: var(--nk-f);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.5;
}
.neko-pu-desc {
    font-size: 13px;
    color: var(--nk-brown-md);
    line-height: 1.8;
    margin-bottom: 16px;
}
.neko-pu-price {
    font-size: 22px;
    font-weight: 700;
    color: var(--nk-camel);
    margin-bottom: 14px;
}
.neko-pu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--nk-brown);
    color: #fff;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.3s;
    align-self: flex-start;
}
.neko-pu-card:hover .neko-pu-btn {
    background: var(--nk-camel);
}

/* ============================================================
   Popular Ranking
   ============================================================ */
.neko-popular {
    padding: 64px 0;
    background: var(--nk-white);
}

.neko-pop-scroll {
    gap: 20px;
    padding-bottom: 12px;
}

.neko-pc {
    flex: 0 0 230px;
    scroll-snap-align: start;
    border-radius: var(--nk-r);
    overflow: hidden;
    border: 1px solid var(--nk-border);
    transition: all 0.3s;
    background: var(--nk-white);
    text-decoration: none !important;
    color: var(--nk-brown);
    position: relative;
}
.neko-pc:hover {
    box-shadow: 0 8px 32px var(--nk-sh-md);
    transform: translateY(-4px);
    color: var(--nk-brown);
}

.neko-pc-img {
    height: 180px;
    position: relative;
    overflow: hidden;
}
.neko-pc-img img.neko-pc-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.neko-pc-rank {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    border-radius: 0 0 12px 0;
    z-index: 2;
}
.neko-r1 { background: var(--nk-gold); }
.neko-r2 { background: #b0b0b0; }
.neko-r3 { background: #c2855a; }
.neko-r-default { background: var(--nk-brown-lt); }

/* Cart overlay on hover */
.neko-pc-cart-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background: linear-gradient(transparent, rgba(74,58,43,0.85));
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2;
}
.neko-pc:hover .neko-pc-cart-overlay {
    opacity: 1;
}

.neko-add-cart-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--nk-white);
    color: var(--nk-brown);
    padding: 8px 18px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    font-family: var(--nk-fb);
}
.neko-add-cart-btn:hover {
    background: var(--nk-camel);
    color: #fff;
}

.neko-pc-body { padding: 14px 16px; }
.neko-pc-cat {
    font-size: 10px;
    color: var(--nk-brown-lt);
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.neko-pc-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 6px;
}
.neko-pc-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.neko-pc-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--nk-camel);
}
.neko-pc-stars {
    font-size: 10px;
    color: var(--nk-gold);
}
.neko-pc-stars span {
    color: var(--nk-brown-lt);
    margin-left: 2px;
    font-size: 11px;
}

/* ============================================================
   New Arrivals
   ============================================================ */
.neko-new {
    padding: 64px 0;
    background: var(--nk-cream);
}

.neko-new-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.neko-nc {
    background: var(--nk-white);
    border-radius: var(--nk-r);
    overflow: hidden;
    border: 1px solid var(--nk-border);
    transition: all 0.3s;
    text-decoration: none !important;
    color: var(--nk-brown);
    position: relative;
}
.neko-nc:hover {
    box-shadow: 0 8px 32px var(--nk-sh-md);
    transform: translateY(-4px);
    color: var(--nk-brown);
}

.neko-nc-img {
    height: 180px;
    position: relative;
    overflow: hidden;
}
.neko-nc-img img.neko-nc-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.neko-nc-new {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--nk-green);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    z-index: 2;
}
.neko-nc-cart {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px 16px;
    background: linear-gradient(transparent, rgba(74,58,43,0.85));
    display: flex;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2;
}
.neko-nc:hover .neko-nc-cart {
    opacity: 1;
}

.neko-nc-body { padding: 14px 16px; }
.neko-nc-cat {
    font-size: 10px;
    color: var(--nk-brown-lt);
    font-weight: 600;
    margin-bottom: 2px;
}
.neko-nc-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 6px;
}
.neko-nc-price {
    font-size: 16px;
    font-weight: 700;
    color: var(--nk-camel);
}

/* ============================================================
   Shipping
   ============================================================ */
.neko-ship {
    padding: 48px 0;
    background: var(--nk-white);
    border-top: 1px solid var(--nk-border);
    border-bottom: 1px solid var(--nk-border);
}

.neko-ship-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.neko-ship-item {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
}

.neko-ship-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--nk-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    color: var(--nk-camel);
}

.neko-ship-text {
    font-size: 13px;
    line-height: 1.6;
}
.neko-ship-text strong {
    display: block;
    font-size: 14px;
    color: var(--nk-brown);
}

/* ============================================================
   Magazine
   ============================================================ */
.neko-mag {
    padding: 64px 0;
    background: var(--nk-cream);
}

.neko-mag-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.neko-mc {
    border-radius: var(--nk-r);
    overflow: hidden;
    border: 1px solid var(--nk-border);
    transition: all 0.3s;
    background: var(--nk-white);
    text-decoration: none !important;
    color: var(--nk-brown);
}
.neko-mc:hover {
    box-shadow: 0 8px 32px var(--nk-sh-md);
    transform: translateY(-4px);
    color: var(--nk-brown);
}

.neko-mc-img {
    height: 160px;
    overflow: hidden;
}
.neko-mc-img img.neko-mc-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.neko-mc:hover .neko-mc-img img {
    transform: scale(1.03);
}

.neko-mc-body { padding: 18px; }
.neko-mc-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    color: var(--nk-rose);
    background: var(--nk-rose-pale);
    padding: 2px 8px;
    border-radius: 100px;
    margin-bottom: 8px;
}
.neko-mc-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 4px;
}
.neko-mc-date {
    font-size: 11px;
    color: var(--nk-brown-lt);
}

/* ============================================================
   Newsletter
   ============================================================ */
.neko-nl {
    padding: 56px 0;
    background: linear-gradient(135deg, var(--nk-brown) 0%, #3a2e25 100%);
    color: #fff;
    text-align: center;
}
.neko-nl-title {
    font-family: var(--nk-f);
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}
.neko-nl-desc {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
    margin-bottom: 24px;
}
.neko-nl-form {
    display: flex;
    gap: 10px;
    max-width: 440px;
    margin: 0 auto;
}
.neko-nl-form input {
    flex: 1;
    padding: 13px 18px;
    border: none;
    border-radius: 100px;
    font-size: 13px;
    font-family: var(--nk-fb);
    background: rgba(255,255,255,0.12);
    color: #fff;
    outline: none;
}
.neko-nl-form input::placeholder { color: rgba(255,255,255,0.4); }
.neko-nl-form input:focus { background: rgba(255,255,255,0.2); }
.neko-nl-form button {
    padding: 13px 28px;
    border: none;
    border-radius: 100px;
    background: var(--nk-camel);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--nk-fb);
    cursor: pointer;
    transition: all 0.3s;
}
.neko-nl-form button:hover { background: var(--nk-camel-dk); }
.neko-nl-note {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 12px;
}

/* ============================================================
   Floating Buttons — SWELL純正 + お問い合わせ
   ============================================================ */

/* お問い合わせボタン */
.neko-float-contact {
    position: fixed;
    bottom: 20px;
    right: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--nk-green);
    color: #fff !important;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(126,160,126,0.4);
    transition: all 0.3s;
    z-index: 90;
    text-decoration: none !important;
    gap: 1px;
}
.neko-float-contact:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 24px rgba(126,160,126,0.5);
    color: #fff !important;
}
.neko-float-contact .neko-float-text {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1;
}

/* SWELL純正 INDEX・TOPボタン — ローズデザイン */
#fix_tocbtn.c-fixBtn,
#pagetop.c-fixBtn {
    width: 54px !important;
    height: 54px !important;
    background: var(--nk-white) !important;
    border: 2.5px solid var(--nk-rose) !important;
    color: var(--nk-rose) !important;
    box-shadow: 0 3px 14px rgba(196,134,142,0.18) !important;
    transition: all 0.3s !important;
    right: 27px !important;
}
#fix_tocbtn.c-fixBtn:hover,
#pagetop.c-fixBtn:hover {
    background: var(--nk-rose) !important;
    color: #fff !important;
    box-shadow: 0 5px 20px rgba(196,134,142,0.35) !important;
}
#fix_tocbtn .c-fixBtn__icon,
#fix_tocbtn .c-fixBtn__label,
#pagetop .c-fixBtn__icon,
#pagetop .c-fixBtn__label {
    color: inherit !important;
}

/* 位置 — CONTACTの上に積む */
#pagetop.c-fixBtn {
    bottom: 100px !important;
}
#fix_tocbtn.c-fixBtn {
    bottom: 166px !important;
}

/* タブレット */
@media (max-width: 1024px) {
    .neko-float-contact {
        width: 56px;
        height: 56px;
        right: 20px;
        font-size: 18px;
    }
    #fix_tocbtn.c-fixBtn,
    #pagetop.c-fixBtn {
        width: 50px !important;
        height: 50px !important;
        right: 23px !important;
    }
    #pagetop.c-fixBtn {
    bottom: 92px !important;
}
#fix_tocbtn.c-fixBtn {
    bottom: 154px !important;
}

/* スマホ */
@media (max-width: 768px) {
    .neko-float-contact {
        bottom: 14px;
        right: 14px;
        width: 52px;
        height: 52px;
        font-size: 16px;
    }
    #fix_tocbtn.c-fixBtn,
    #pagetop.c-fixBtn {
        width: 46px !important;
        height: 46px !important;
        right: 17px !important;
    }
    #pagetop.c-fixBtn {
    bottom: 82px !important;
}
#fix_tocbtn.c-fixBtn {
    bottom: 140px !important;
}

/* ============================================================
   Fade-in Animation
   ============================================================ */
.neko-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.neko-fade-up.neko-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   Responsive — Tablet
   ============================================================ */
@media (max-width: 1024px) {
    .neko-pickup-grid { grid-template-columns: 1fr; }
    .neko-pu-card { grid-template-columns: 1fr 1fr; }
    .neko-new-grid { grid-template-columns: repeat(2, 1fr); }
    .neko-mag-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
        margin: 0 auto;
    }
}

/* ============================================================
   Responsive — Mobile
   ============================================================ */
@media (max-width: 768px) {
    .neko-tb-in { gap: 14px; font-size: 10px; }
    .neko-sec-title { font-size: 18px; }

    .neko-scroll-arr { width: 32px; height: 32px; font-size: 12px; }
    .neko-arr-l { left: -6px; }
    .neko-arr-r { right: -6px; }

    .neko-cc { flex: 0 0 100px; padding: 16px 8px 12px; }
    .neko-cc-icon { width: 44px; height: 44px; font-size: 20px; }
    .neko-cc-name { font-size: 10px; }

    .neko-pickup-grid { grid-template-columns: 1fr; }
    .neko-pu-card { grid-template-columns: 1fr; }
    .neko-pu-img { min-height: 200px; }

    .neko-pc { flex: 0 0 200px; }

    .neko-new-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .neko-nc-img { height: 140px; }

    .neko-ship-row { grid-template-columns: 1fr; gap: 16px; }

    .neko-mag-grid { gap: 12px; }

    .neko-nl-form { flex-direction: column; }
    .neko-nl-form input,
    .neko-nl-form button { border-radius: 10px; }

    .neko-float-contact {
        bottom: 14px; right: 14px;
        width: 46px; height: 46px;
        font-size: 18px;
    }
}

/* ============================================================
   Header Bar Icons
   ============================================================ */
.neko-hd-icons {
    display: flex;
    gap: 20px;
    align-items: center;
}
.neko-hd-icon {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,0.85) !important;
    font-size: 12px;
    text-decoration: none !important;
    transition: color 0.2s;
}
.neko-hd-icon:hover {
    color: var(--nk-camel) !important;
}
.neko-hd-icon i {
    font-size: 16px;
}
.neko-hd-cart {
    position: relative;
}
.neko-hd-cart-count {
    position: absolute;
    top: -8px;
    right: -12px;
    width: 18px;
    height: 18px;
    background: var(--nk-camel);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   Header Nav - Login & Cart icons
   ============================================================ */
.neko-nav-right a::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 6px;
    font-size: 14px;
}
.neko-nav-right a[href*="my-account"]::before {
    content: '\f007';
}
.neko-nav-right a[href*="cart"]::before {
    content: '\f290';
}

/* スマホメニュー — ログイン・カートにも矢印追加 */
.p-spMenu .neko-nav-right > a::before {
    content: '\e921';
    font-family: icomoon !important;
    font-size: inherit;
    font-style: normal;
    font-weight: 400;
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    color: inherit;
}
.p-spMenu .neko-nav-right > a {
    position: relative;
}