/* AIR MEISHI BASE SHOP - Dark Navy Theme v3.0 */
/* External CSS - uploaded via BASE file uploader */

/* === Critical layout overrides === */
html,
body {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100vh !important;
}

.layout-wrapper,
.layout-main,
.layout-content,
.layout-inner,
#wrap,
#main,
.main-wrapper,
.content-wrapper,
.shop-wrapper {
    height: auto !important;
    overflow: visible !important;
    max-height: none !important;
}

/* === Base body styles === */
body.shop {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    -webkit-text-size-adjust: none !important;
    word-break: break-all !important;
}

body {
    background: #0d1b2a !important;
    background-image: linear-gradient(160deg, #1a2744 0%, #0d1b2a 50%, #0a1628 100%) !important;
    background-attachment: fixed !important;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif !important;
}

/* === Links === */
a {
    color: #48cae4 !important;
}

a:hover,
a:active {
    color: #00b4d8 !important;
}

/* === Layout wrapper === */
body.shop .wrapper {
    margin: 0 auto 60px !important;
    padding: 0 10px !important;
}

@media(min-width: 769px) {
    body.shop .wrapper {
        width: 960px !important;
    }
}

/* === Fixed Header === */
#reportBtn a.cboxElement button {
    cursor: pointer !important;
}

#fixedHeader ul li {
    float: left !important;
}

#fixedHeader li.topRightNavLi a {
    background: rgba(30, 45, 74, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    color: rgba(255, 255, 255, 0.92) !important;
    display: block !important;
    padding: 6px 16px !important;
    margin: 1px 0 0 !important;
}

#fixedHeader li.topRightNavLi a:hover {
    background: rgba(0, 180, 216, 0.15) !important;
    border-color: rgba(0, 180, 216, 0.3) !important;
}

#fixedHeader li.topRightNavLi.base {
    margin: 0 10px 0 0 !important;
}

body.shop #mainHeader {
    margin: 0 auto 40px !important;
}

body.shop #fixedHeader {
    padding: 8px 16px !important;
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    z-index: 2002 !important;
}

/* === Shop Header === */
body.shop #shopHeader h1 {
    display: block !important;
    font-family: "Outfit", "Inter", "Noto Sans JP", sans-serif !important;
    font-size: 30px !important;
    letter-spacing: 4px !important;
    text-align: center !important;
    margin: 56px 0 34px !important;
}

body.shop #shopHeader h1 a {
    display: inline-block !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

body.shop #shopHeader h1 img {
    max-width: 960px !important;
    width: 100% !important;
}

/* === Navigation === */
body.shop #shopHeader nav {
    font-size: 12px !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin: 0 7px !important;
    background: rgba(30, 45, 74, 0.7) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-radius: 8px !important;
    padding: 4px !important;
}

body.shop #shopHeader nav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

body.shop #shopHeader nav ul li {
    display: block !important;
    height: 40px !important;
    line-height: 20px !important;
    text-align: center !important;
}

body.shop #shopHeader nav ul li.itemSearch {
    width: 100% !important;
    padding: 0 16px !important;
}

body.shop #shopHeader nav ul li.itemSearch form {
    box-sizing: border-box !important;
    border: none !important;
    display: inline-block !important;
    padding: 0 30px 0 0 !important;
    position: relative !important;
    width: 100% !important;
    height: 40px !important;
}

body.shop #shopHeader nav ul li.itemSearch form input {
    width: 100% !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

body.shop #shopHeader nav ul li.itemSearch form .itemSearch__btn {
    background-color: transparent !important;
    border-style: none !important;
    cursor: pointer !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

@media(min-width: 769px) {
    body.shop #shopHeader nav ul li.itemSearch form {
        width: 65px !important;
    }
}

body.shop #shopHeader nav ul li:hover {
    border-bottom: solid 2px #00b4d8 !important;
    height: 38px !important;
}

body.shop #shopHeader nav ul li a {
    display: block !important;
    padding: 10px !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

body.shop #shopHeader nav ul li a:hover {
    color: #48cae4 !important;
}

@media(min-width: 481px) {
    body.shop #shopHeader nav ul {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
    }

    body.shop #shopHeader nav ul li {
        flex: 1 !important;
        width: auto !important;
    }
}

/* === Footer === */
body.shop #mainFooter {
    font-size: 11px !important;
    font-weight: bold !important;
    margin: 60px auto 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 30px !important;
}

body.shop #mainFooter .footerMenu ul {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

body.shop #mainFooter .footerMenu ul li {
    width: 100% !important;
    margin-bottom: 16px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 20px !important;
    text-align: center !important;
}

body.shop #mainFooter .footerMenu ul li a {
    color: rgba(255, 255, 255, 0.6) !important;
}

body.shop #mainFooter .footerMenu ul li a:hover {
    color: #48cae4 !important;
}

@media(min-width: 769px) {
    body.shop #mainFooter .footerMenu ul {
        flex-wrap: nowrap !important;
    }

    body.shop #mainFooter .footerMenu ul li {
        width: auto !important;
        margin-right: 16px !important;
    }
}

/* === Product List (Top Page) === */
body#shopTopPage .itemList {
    margin: 0 auto !important;
    overflow: visible !important;
    width: calc(100% - 32px) !important;
    padding: 0 16px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

body#shopTopPage .item {
    box-sizing: border-box !important;
    text-align: center !important;
    width: calc(50% - 12px) !important;
    background: rgba(30, 45, 74, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    transition: all 0.3s ease !important;
}

body#shopTopPage .item:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 32px rgba(0, 180, 216, 0.15) !important;
    border-color: rgba(0, 180, 216, 0.3) !important;
}

@media(min-width: 769px) {
    body#shopTopPage .itemList {
        width: 987px !important;
    }

    body#shopTopPage .item {
        width: 210px !important;
        padding: 14px !important;
        margin: 0 18px 30px !important;
    }

    body#shopTopPage .item .itemImg {
        height: 210px !important;
        line-height: 208px !important;
        width: 210px !important;
    }

    body#shopTopPage .item .itemImg img {
        max-height: 206px !important;
        max-width: 206px !important;
    }
}

body#shopTopPage .item .itemTitle {
    margin: 16px 0 5px !important;
    text-align: center !important;
}

body#shopTopPage .item a {
    color: rgba(255, 255, 255, 0.92) !important;
}

body#shopTopPage .item a:hover {
    color: #48cae4 !important;
}

body#shopTopPage .item a .itemTitle h2 {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body#shopTopPage .item .itemImg {
    box-sizing: border-box !important;
    margin: auto !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.95) !important;
}

body#shopTopPage .item .itemImg a {
    display: block !important;
    position: relative !important;
}

body#shopTopPage .item .itemImg a::before {
    content: "" !important;
    display: block !important;
    padding-top: 100% !important;
}

body#shopTopPage .item .itemImg img.image-resize {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

body#shopTopPage .item .itemImg a .soldout_cover {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(13, 27, 42, 0.85) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

body#shopTopPage .item .itemImg a .soldout_cover p {
    color: #00b4d8 !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

body#shopTopPage .item .itemDetail .itemPrice {
    font-size: 13px !important;
    letter-spacing: 1px !important;
    text-align: center !important;
    color: #e8c87a !important;
    font-weight: 600 !important;
}

body#shopTopPage .item .itemDetail .discountPrice {
    color: #e75c5c !important;
}

body#shopTopPage .item .comingSoon {
    color: #00b4d8 !important;
}

/* === Product Detail Page === */
body#shopDetailPage #mainContent {
    background: rgba(30, 45, 74, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    margin-bottom: 50px !important;
}

body#shopDetailPage .itemImg {
    display: flex !important;
    height: calc(100vw - 80px) !important;
}

body#shopDetailPage #slideImg .imgBox {
    border-radius: 12px !important;
    text-align: center !important;
    overflow: hidden !important;
}

body#shopDetailPage #slideImg .imgBox img {
    width: 100% !important;
}

body#shopDetailPage #slideImgPager .smallImgBox {
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body#shopDetailPage #slideImgPager .smallImgBox:hover {
    border-color: #00b4d8 !important;
}

body#shopDetailPage #mainContent .purchase {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body#shopDetailPage header h1.itemTitle {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

body#shopDetailPage #purchase_form {
    color: rgba(255, 255, 255, 0.92) !important;
}

body#shopDetailPage #purchase_form input,
body#shopDetailPage #purchase_form select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    padding: 8px 12px !important;
}

body#shopDetailPage #purchase_form input:focus,
body#shopDetailPage #purchase_form select:focus {
    border-color: #00b4d8 !important;
    box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15) !important;
    outline: none !important;
}

body#shopDetailPage #purchase_form label {
    color: rgba(255, 255, 255, 0.6) !important;
}

body#shopDetailPage .itemPrice h2 {
    color: rgba(255, 255, 255, 0.92) !important;
}

body#shopDetailPage .itemPrice h2 .price__mainValue {
    color: #e8c87a !important;
}

body#shopDetailPage .itemPrice h2 .price__tax {
    color: rgba(255, 255, 255, 0.4) !important;
}

body#shopDetailPage .purchase .soldout,
body#shopDetailPage .purchase .comingSoon {
    color: #00b4d8 !important;
}

body#shopDetailPage .itemDescription {
    color: rgba(255, 255, 255, 0.6) !important;
}

body#shopDetailPage #purchase_form .purchaseButton .purchaseButton__btn {
    background: linear-gradient(135deg, #0077b6 0%, #00b4d8 100%) !important;
    border: none !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 16px 0 !important;
    border-radius: 50px !important;
    letter-spacing: 2px !important;
    width: 100% !important;
    box-shadow: 0 4px 16px rgba(0, 180, 216, 0.3) !important;
    cursor: pointer !important;
}

body#shopDetailPage #purchase_form .purchaseButton .purchaseButton__btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 180, 216, 0.4) !important;
}

body#shopDetailPage #purchase_form .purchaseButton .purchaseButton__btn:disabled {
    background: rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.4) !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

body#shopDetailPage .report a {
    color: rgba(255, 255, 255, 0.4) !important;
}

@media(min-width: 769px) {
    body#shopDetailPage #mainContent {
        padding: 80px 65px !important;
        width: 830px !important;
    }

    body#shopDetailPage #mainContent .item {
        float: left !important;
        width: 493px !important;
    }

    body#shopDetailPage #mainContent .purchase {
        margin: 0 0 0 520px !important;
        width: 280px !important;
    }

    body#shopDetailPage header h1.itemTitle {
        font-size: 27px !important;
    }

    body#shopDetailPage #slideImg .imgBox {
        height: 400px !important;
        width: 400px !important;
    }

    body#shopDetailPage #slideImg .imgBox img {
        max-height: 400px !important;
        max-width: 400px !important;
        object-fit: contain !important;
    }
}

/* === About / Contact / Legal pages === */
#widget {
    margin: 0 !important;
}

.main {
    background: rgba(30, 45, 74, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    height: auto !important;
    margin: 0 auto !important;
    width: 960px !important;
}

.main #about {
    color: rgba(255, 255, 255, 0.6) !important;
}

.main #about h2,
.main #about h3 {
    color: rgba(255, 255, 255, 0.92) !important;
}

.inquirySection h1 {
    color: rgba(255, 255, 255, 0.92) !important;
}

.inquirySection p {
    color: rgba(255, 255, 255, 0.6) !important;
}

.inquirySection dl dt {
    color: rgba(255, 255, 255, 0.92) !important;
}

.inquirySection dl dt span {
    color: #00b4d8 !important;
}

.inquirySection dl dd input,
.inquirySection dl dd textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

.inquirySection .control-panel input#buttonLeave {
    background: linear-gradient(135deg, #0077b6, #00b4d8) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 50px !important;
}

#inquiryConfirmSection p {
    color: rgba(255, 255, 255, 0.92) !important;
}

#inquiryCompleteSection a {
    background: linear-gradient(135deg, #0077b6, #00b4d8) !important;
    color: #fff !important;
    border-radius: 50px !important;
}

#privacy,
#law {
    background: rgba(30, 45, 74, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

#privacy h2,
#law h2,
#privacy h3,
#law h3,
#privacy dt {
    color: rgba(255, 255, 255, 0.92) !important;
}

@media(max-width: 769px) {

    .main,
    #privacy,
    #law {
        width: 92% !important;
    }
}

/* === Category menu === */
.template #category-menu .category-list ul {
    background: #1e2d4a !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
}

.template #category-menu .category-list ul li a {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.template #category-menu:hover .category-list ul li:hover {
    background-color: rgba(0, 180, 216, 0.1) !important;
}

.categoryTitle01 {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* === Animations === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body#shopTopPage .item {
    animation: fadeInUp 0.5s ease both;
}

body#shopTopPage .item:nth-child(2) {
    animation-delay: 0.1s;
}

body#shopTopPage .item:nth-child(3) {
    animation-delay: 0.15s;
}

body#shopTopPage .item:nth-child(4) {
    animation-delay: 0.2s;
}

/* === Misc text colors === */
.mainHeaderNavColor {
    color: rgba(255, 255, 255, 0.6) !important;
}

.mainHeaderNavColor:hover {
    color: #48cae4 !important;
}

.footerNav {
    color: rgba(255, 255, 255, 0.6) !important;
}

.footerNav:hover {
    color: #48cae4 !important;
}

.pinnedBlog .pinnedBlog_title {
    color: rgba(255, 255, 255, 0.6) !important;
}

.titleForSearchResult {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* === LogoTag suppression (multiple selectors for safety) === */
#shopFooterLogo {
    display: block !important;
    font-size: 11px !important;
    text-align: center !important;
    margin: 30px auto !important;
    opacity: 0.3 !important;
    max-width: 200px !important;
}

#shopFooterLogo img {
    max-width: 120px !important;
    height: auto !important;
}

#shopFooterLogo a,
#shopFooterLogo span,
#shopFooterLogo p,
#shopFooterLogo h1 {
    color: rgba(255, 255, 255, 0.3) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
}