/* ProductOrder グリッドモーダル */
.csic-gridmodal{width:100%}
.csic-gridmodal-title{margin:0 0 16px}
.csic-gridmodal-grid{display:grid;grid-template-columns:repeat(var(--csic-gridmodal-pc,3),minmax(0,1fr));gap:18px}
.csic-gridmodal-card{min-width:0;overflow:hidden;background:var(--csic-card-bg,#fff);border:1px solid var(--csic-card-border,#ddd);border-radius:var(--csic-card-radius,10px)}
.csic-gridmodal-preview-image,.csic-gridmodal-preview-name{appearance:none;border:0;background:transparent;color:inherit;padding:0;margin:0;cursor:pointer;text-align:left}
.csic-gridmodal-preview-image{display:block;width:100%;aspect-ratio:4/3;overflow:hidden}
.csic-gridmodal-preview-image img{display:block;width:100%;height:100%;object-fit:cover}
.csic-gridmodal-preview-body{display:grid;gap:8px;padding:14px 16px}
.csic-gridmodal-preview-name{width:100%;font-size:16px;font-weight:700;line-height:1.5}
.csic-gridmodal-preview-image:hover,.csic-gridmodal-preview-name:hover{opacity:.84}
html.csic-gridmodal-open,body.csic-gridmodal-open{overflow:hidden!important}
.csic-gridmodal-modal{position:fixed;inset:0;z-index:999999;background:transparent;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease}
.csic-gridmodal-modal.is-active{opacity:1;visibility:visible;pointer-events:auto}
.csic-gridmodal-modal.csic-gridmodal-open-animation-none{transition:none}
/* 展開アニメーションはgridmodal.jsで毎回確実に再生する。 */
@keyframes csicGridmodalOpenFade{from{opacity:0}to{opacity:1}}
@keyframes csicGridmodalOpenSlideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.csic-gridmodal-modal-scroll{width:100%;height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.csic-gridmodal-modal-content{width:min(1440px,calc(100% - 48px));min-height:100%;margin:0 auto;padding:90px 0 48px;box-sizing:border-box}
.csic-gridmodal-modal-controls{position:fixed;top:18px;right:22px;z-index:1000001;display:flex;align-items:center;gap:8px}
.csic-gridmodal-modal-controls button{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:rgb(255 255 255 / 94%);color:#222;font:400 28px/1 sans-serif;cursor:pointer;box-shadow:0 3px 12px rgb(0 0 0 / 12%);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.csic-gridmodal-modal-controls button:hover{background:#f2f2f2;transform:scale(1.05)}
.csic-gridmodal-modal-close{font-size:32px!important}
.csic-gridmodal-modal.is-single-product .csic-gridmodal-modal-prev,.csic-gridmodal-modal.is-single-product .csic-gridmodal-modal-next{display:none}
.csic-gridmodal-modal .csic-gridmodal-detail{display:grid}
.csic-gridmodal-detail-no-image{grid-template-columns:1fr!important}
@media(max-width:959px){.csic-gridmodal-grid{grid-template-columns:repeat(var(--csic-gridmodal-tablet,3),minmax(0,1fr));gap:14px}}
@media(max-width:599px){.csic-gridmodal-grid{grid-template-columns:repeat(var(--csic-gridmodal-mobile,2),minmax(0,1fr));gap:10px}.csic-gridmodal-preview-body{padding:10px 12px}.csic-gridmodal-preview-name{font-size:14px}.csic-gridmodal-modal-controls{top:10px;right:10px;gap:6px}.csic-gridmodal-modal-controls button{width:38px;height:38px;font-size:24px}.csic-gridmodal-modal-content{width:calc(100% - 24px);padding:66px 0 30px}}
/* モーダル幅・タブ・外部詳細コンテンツ */
.csic-gridmodal-grid-only .csic-gridmodal-open{cursor:default;pointer-events:none}
.csic-gridmodal-modal.is-parent-width{left:var(--csic-gridmodal-parent-left,0);right:auto;width:var(--csic-gridmodal-parent-width,100%)}
.csic-gridmodal-tabs{display:flex;gap:4px;margin:0 0 18px;border-bottom:1px solid var(--csic-card-border,#ddd)}
.csic-gridmodal-tab{appearance:none;border:0;border-bottom:3px solid transparent;background:transparent;color:inherit;min-height:44px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer}
.csic-gridmodal-tab.is-active{border-bottom-color:var(--csic-card-accent,#2271b1)}
.csic-gridmodal-tab:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.csic-gridmodal-tabpanel.is-hidden{display:none!important}
.csic-gridmodal-remote-section{margin:0 0 24px}
.csic-gridmodal-remote-section>h3{margin:0 0 12px;font-size:1.15em}
.csic-gridmodal-remote-section>:last-child{margin-bottom:0}
.csic-gridmodal-no-right-column .csic-gridmodal-info{display:none!important}
@media(max-width:599px){.csic-gridmodal-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.csic-gridmodal-tab{width:100%;min-height:48px;padding:11px 8px}.csic-gridmodal-modal.is-parent-width{left:0!important;width:100%!important}}
.csic-gridmodal-detail.csic-gridmodal-no-right-column{grid-template-columns:1fr!important}
.csic-gridmodal-detail.csic-gridmodal-no-right-column .csic-gridmodal-info{display:none!important}


/* 親要素幅モードは親要素の位置・幅を基準にする。
   画面全体モードの既存挙動には影響させない。 */
.csic-gridmodal-modal.is-parent-width {
    inset: auto !important;
    left: var(--csic-gridmodal-parent-left, 0) !important;
    top: var(--csic-gridmodal-parent-top, 0) !important;
    width: var(--csic-gridmodal-parent-width, 100%) !important;
    height: var(--csic-gridmodal-parent-height, 100vh) !important;
    background: transparent !important;
}

.csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-controls {
    position: absolute !important;
    top: 18px !important;
    right: 22px !important;
}

.csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-content {
    width: calc(100% - 48px);
}

@media (max-width: 599px) {
    .csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-controls {
        top: 10px !important;
        right: 10px !important;
    }

    .csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-content {
        width: calc(100% - 24px);
    }
}


/* 「親要素幅」は横幅だけを親要素基準にする。 */
.csic-gridmodal-modal.is-parent-width {
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
}



/* 親要素幅モードは横幅を親要素に合わせたまま、モーダル本体を
   現在のビューポート中央へ配置する。 */
.csic-gridmodal-modal.is-parent-width {
    top: 50% !important;
    bottom: auto !important;
    height: min(88vh, 900px) !important;
    max-height: 88vh !important;
    transform: translateY(-50%);
    overflow: visible;
}

.csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-scroll {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-content {
    min-height: 100%;
    padding-top: 72px;
    padding-bottom: 32px;
}

.csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-controls {
    top: 14px !important;
    right: 18px !important;
}

@media (max-width: 599px) {
    .csic-gridmodal-modal.is-parent-width {
        top: 50% !important;
        height: 90vh !important;
        max-height: 90vh !important;
        height: 90dvh !important;
        max-height: 90dvh !important;
        transform: translateY(-50%);
    }

    .csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-content {
        padding-top: 62px;
        padding-bottom: 24px;
    }
}


/* 親要素幅モードの背面をぼかす。
   モーダル内容自体ではなく、背後に見えているページだけへ適用。 */
.csic-gridmodal-modal.is-parent-width {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background: rgba(255,255,255,.08) !important;
}


/* 親要素幅モードでも、背景ぼかしはビューポート全体へ。
   モーダル本体は親要素幅のまま、疑似要素だけ画面全体を覆う。 */
.csic-gridmodal-modal.is-parent-width {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
}

.csic-gridmodal-modal.is-parent-width::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    pointer-events: none;
}

/* モーダル内容はぼかしの前面に保つ */
.csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-scroll,
.csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-controls {
    position: relative;
    z-index: 1;
}

/* スマホ2列時のカード内余白を圧縮。
   通常カードには触れず、グリッドモーダルの展開前カードだけ対象。 */
@media (max-width: 599px) {
    .csic-gridmodal-grid .csic-gridmodal-card {
        padding: 8px !important;
        gap: 8px !important;
    }

    .csic-gridmodal-grid .csic-gridmodal-preview-body {
        padding: 6px 4px 8px !important;
    }

    .csic-gridmodal-grid .csic-gridmodal-preview-name {
        margin: 0 !important;
        line-height: 1.35;
    }

    .csic-gridmodal-grid .csic-gridmodal-preview-price {
        margin-top: 6px !important;
        line-height: 1.35;
    }

    .csic-gridmodal-grid .csic-gridmodal-preview-price .product-price-tax-exclusive,
    .csic-gridmodal-grid .csic-gridmodal-preview-price .product-price-tax-inclusive {
        white-space: nowrap;
    }

    .csic-gridmodal-grid .csic-gridmodal-preview-price .product-price-meta {
        white-space: nowrap;
    }
}


/* 親要素幅モーダルの背景ぼかしを独立レイヤーへ配置。
   body直下でビューポート全体を覆うため、ヘッダー・左右余白・下部まで一様にぼかす。 */
.csic-gridmodal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    transition: opacity .12s ease, visibility .12s ease;
}

.csic-gridmodal-backdrop.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 疑似要素の背景レイヤーは使用しない */
.csic-gridmodal-modal.is-parent-width::before {
    content: none !important;
    display: none !important;
}

/* 親要素幅モードの操作ボタンをスクロール層より確実に前面へ戻す */
.csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-controls {
    position: absolute !important;
    top: 14px !important;
    right: 18px !important;
    z-index: 1000002 !important;
    pointer-events: auto !important;
}

.csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-controls button {
    pointer-events: auto !important;
}

.csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-scroll {
    position: relative;
    z-index: 1;
}

@media (max-width: 599px) {
    .csic-gridmodal-modal.is-parent-width .csic-gridmodal-modal-controls {
        top: 10px !important;
        right: 10px !important;
    }
}


/* グリッドモーダル操作ボタンはSVGで統一。
   OS/ブラウザ/フォント差による ‹ › × の位置ズレを防ぐ。 */
.csic-gridmodal-modal-controls button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.csic-gridmodal-modal-controls button svg {
    display: block;
    width: 20px;
    height: 20px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.csic-gridmodal-modal-controls .csic-gridmodal-modal-close svg {
    width: 21px;
    height: 21px;
    stroke-width: 1.8;
}

@media (max-width: 599px) {
    .csic-gridmodal-modal-controls button svg {
        width: 18px;
        height: 18px;
    }

    .csic-gridmodal-modal-controls .csic-gridmodal-modal-close svg {
        width: 19px;
        height: 19px;
    }
}


/* 操作ボタン配置プリセット */
.csic-gridmodal-modal.csic-gridmodal-controls-left .csic-gridmodal-modal-controls,
.csic-gridmodal-modal.is-parent-width.csic-gridmodal-controls-left .csic-gridmodal-modal-controls {
    left: 18px !important; right: auto !important; transform: none !important;
}
.csic-gridmodal-modal.csic-gridmodal-controls-left .csic-gridmodal-modal-close { order: -1; }
.csic-gridmodal-modal.csic-gridmodal-controls-center .csic-gridmodal-modal-controls,
.csic-gridmodal-modal.is-parent-width.csic-gridmodal-controls-center .csic-gridmodal-modal-controls {
    left: 50% !important; right: auto !important; transform: translateX(-50%) !important;
}
.csic-gridmodal-modal.csic-gridmodal-controls-right .csic-gridmodal-modal-controls,
.csic-gridmodal-modal.is-parent-width.csic-gridmodal-controls-right .csic-gridmodal-modal-controls {
    left: auto !important; right: 18px !important; transform: none !important;
}
.csic-gridmodal-modal.csic-gridmodal-controls-global .csic-gridmodal-modal-controls,
.csic-gridmodal-modal.is-parent-width.csic-gridmodal-controls-global .csic-gridmodal-modal-controls {
    left: 25px !important; right: 25px !important; transform: none !important; width: auto !important;
}
.csic-gridmodal-modal.csic-gridmodal-controls-global .csic-gridmodal-modal-close { margin-left: auto; }
@media(max-width:599px){
 .csic-gridmodal-modal.csic-gridmodal-controls-left .csic-gridmodal-modal-controls,
 .csic-gridmodal-modal.is-parent-width.csic-gridmodal-controls-left .csic-gridmodal-modal-controls{left:10px!important;right:auto!important}
 .csic-gridmodal-modal.csic-gridmodal-controls-right .csic-gridmodal-modal-controls,
 .csic-gridmodal-modal.is-parent-width.csic-gridmodal-controls-right .csic-gridmodal-modal-controls{left:auto!important;right:10px!important}
 .csic-gridmodal-modal.csic-gridmodal-controls-global .csic-gridmodal-modal-controls,
 .csic-gridmodal-modal.is-parent-width.csic-gridmodal-controls-global .csic-gridmodal-modal-controls{left:10px!important;right:10px!important}
}


.csic-gridmodal-modal.is-parent-width {
    left: var(--csic-gridmodal-parent-left, 0) !important;
    right: auto !important;
    width: var(--csic-gridmodal-parent-width, 100%) !important;
}
@media (max-width: 599px) {
    .csic-gridmodal-modal.is-parent-width {
        left: var(--csic-gridmodal-parent-left, 0) !important;
        right: auto !important;
        width: var(--csic-gridmodal-parent-width, 100%) !important;
    }
}

.csic-gridmodal-modal.is-parent-width.csic-gridmodal-controls-global .csic-gridmodal-modal-close {
    margin-left: auto !important;
    margin-right: 12px !important;
}
@media (max-width: 599px) {
    .csic-gridmodal-modal.is-parent-width.csic-gridmodal-controls-global .csic-gridmodal-modal-close {
        margin-right: 10px !important;
    }
}