/* Common Slider Button Styles: circular 44px buttons with centered arrow */
.slider-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #0068b7;
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    font-size: 18px; /* arrow size */
    line-height: 1;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: background-color 0.15s ease, transform 0.12s ease, opacity 0.15s ease;
}

.slider-prev {
    left: -30px; /* move button outside the container (half of button width + small gap) */
}

.slider-next {
    right: -30px; /* move button outside the container */
}

.slider-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.slider-button:focus {
    outline: 3px solid rgba(0,104,183,0.18);
    outline-offset: 2px;
}

.slider-button:hover {
    background-color: #005aa1;
    transform: translateY(-50%) scale(1.03);
    opacity: 0.85; /* make slightly translucent on hover */
}

.slider-button:active {
    transform: translateY(-50%) scale(0.98);
}

/* Ensure focus state also shows slight translucency for consistency */
.slider-button:focus {
    opacity: 0.85;
}

@media (max-width: 600px) {
    .slider-button {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    /* On small screens, keep buttons inside viewport and allow overlap with items */
    .slider-prev { left: 8px; }
    .slider-next { right: 8px; }
}

/* Tablet: ensure buttons stay inside viewport (may overlap items) */
@media (min-width: 601px) and (max-width: 1024px) {
    /* On tablet widths, nudge nav buttons vertically to visually align with index/detail layouts */
    .slider-button { top: 42%; }
    .slider-prev { left: 8px; }
    .slider-next { right: 8px; }
}

/* Responsive: make recommend cards full-width on mobile (shared between index and detail) */
/* (moved lower so it can override base styles defined later in this file) */

/* Common NEW Mark Styles */
.new-item::before, .main-product-new-mark {
    background-color: #e74c3c; /* 赤系の背景色 */
    color: white;
    font-weight: bold;
    border-radius: 50%; /* make circular */
    white-space: nowrap; /* テキストの折り返しを防ぐ */
}

.new-item::before {
    content: "NEW";
    position: absolute;
    /* place as a circular badge protruding above the item */
    top: -18px; /* move up half of the badge height to "break out" above the item's top */
    right: 5px; /* keep right offset */
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em; /* keep legible inside circle */
    padding: 0;
    z-index: 5; /* above other elements */
}

@media (max-width: 600px) {
    .new-item::before {
            /* larger circular badge on mobile for better visibility */
            top: -20px;
            right: 12px; /* moved further left */
        width: 44px;
        height: 44px;
        font-size: 0.85em;
        padding: 0;
        border-radius: 50%;
    }
}

.main-product-new-mark {
    display: inline-block; /* 商品名と同じ行に表示 */
    font-size: 0.3em; /* 商品名に合わせて調整 */
    padding: 4px 8px; /* 内側の余白 */
    border-radius: 4px; /* 角丸 */
    margin-left: 10px; /* 商品名との間隔 */
    vertical-align: top; /* 垂直方向の位置調整 */
}

@media (max-width: 600px) {
    .main-product-new-mark {
        font-size: 0.3em;
        padding: 3px 6px;
        margin-left: 5px;
    }
}

/* Station list (販売場所から探す) */
.station-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.station-link { padding:6px 10px; background:#f5f5f5; border-radius:16px; text-decoration:none; color:#333; font-size:14px; }
.station-link:hover { background:#e8f4ff; color:#005aa1; }
.station-link.sold-out { color:#999; background:#eee; text-decoration:line-through; pointer-events:none; }

@media (max-width: 600px) {
    .station-list { gap:6px; }
    .station-link { padding:8px 12px; font-size:15px; }
}

/* Channel links (イベント / 車内 / ネットショップ) */
.channel-list { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.channel-link { padding:6px 10px; background:#fff7e6; border-radius:16px; text-decoration:none; color:#8a4b00; font-size:14px; border:1px solid #ffe6b3; }
.channel-link:hover { background:#fff0cc; color:#6b3f00; }


/* Per-product station availability badge shown on goods_list when station query param is used */
.station-status {
    display:inline-block;
    margin-left:8px;
    padding:2px 8px;
    border-radius:12px;
    font-size:12px;
    line-height:1;
    vertical-align:middle;
}
.station-status.sold {
    background:#fff4f4;
    color:#c0392b;
    border:1px solid #f5c6c6;
}
.station-status.available {
    background:#eef9f1;
    color:#1e7f3b;
    border:1px solid #c9e9d0;
}

.station-status.soldout {
    background:#fff4f4;
    color:#c0392b;
    border:1px solid #f5c6c6;
}

/* Common Tag Styles */
.app-tag {
    display: inline-block;
    /* allow tag text to wrap inside the pill when it would otherwise overflow */
    white-space: normal;
    box-sizing: border-box;
    max-width: 100%; /* never exceed container width */
    overflow-wrap: anywhere; /* allow breaking within words if necessary */
    word-break: break-word;
    background-color: #8BC34A; /* 淡い緑 */
    background-color: #ffffff;
    color: #005aa1;
    border: 1px solid #005aa1;
    padding: 6px 12px; /* slightly reduced padding to fit multiple lines */
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.7em; /* 他のP要素と同等に */
    transition: background-color 0.3s ease;
    margin: 0 6px 5px 0;
    line-height : 1.2;
}

a.app-tag:hover {
    background-color: #689F38;
}

/* Common Product Card Styles */
.product-item-base {
    border: 1px solid #eee;
    text-decoration: none;
    color: inherit;
    display: block;
}

.product-item-image {
    width: 100%;
    object-fit: cover;
    display: block;
}

.product-item-name {
    font-weight: bold;
}

.product-item-price {
    color: #e40012;
    font-weight: bold;
}

/* Recommend card base styles (shared by index and detail) */
/* Layout wrapper for each recommend item. Controls sizing, padding, and centering. */
#goods_recommend .recommend-item,
#goods_recommend_detail .recommend-item {
    /* default: show 4 items across on wide screens */
    flex: 0 0 calc((100% - (3 * 20px)) / 4);
    display: flex;
    align-items: stretch;
    justify-content: center; /* allow child A to be centered if narrower */
    padding: 12px; /* space around the card for visual breathing room */
    box-sizing: border-box;
}

/* Tablet: show 2 items across for widths between 601px and 1024px */
@media (min-width: 601px) and (max-width: 1024px) {
    #goods_recommend .recommend-item,
    #goods_recommend_detail .recommend-item {
        flex: 0 0 calc((100% - (1 * 20px)) / 2);
    }
}

/* Visual decoration belongs to the inner link */
#goods_recommend .recommend-item .recommend-card,
#goods_recommend_detail .recommend-item .recommend-card {
    border: 1px solid #eee;
    text-decoration: none;
    color: inherit;
    display: block;
    position: relative; /* for NEW badge */
    padding: 12px;
    box-sizing: border-box;
    background: #fff;
    width: 100%;
    max-width: 360px; /* optional limit so card doesn't grow too wide when centered */
}

@media (max-width: 600px) {
    #goods_recommend .recommend-item,
    #goods_recommend_detail .recommend-item {
        flex: 0 0 100%;
        padding: 0 12%;
    }
    /* ensure inner card fills available width when wrapper is constrained */
    #goods_recommend .recommend-item .recommend-card,
    #goods_recommend_detail .recommend-item .recommend-card {
        width: 100%;
        max-width: none;
    }
}