/* =========================================================
   AF Store Locator - Stylesheet
   ---------------------------------------------------------
   クラス設計ルール（他サイトへ導入する際はこのファイル、
   または導入先テーマのCSSで下記CSS変数を上書きするだけで
   配色・角丸・余白などをブランドに合わせられます）:

   1) スコープ（特定用）    : af-store-search-form / af-store-locator /
                              af-store-single / af-store-search-area /
                              af-store-search-feature / af-store-card-embed
                              など、コンポーネント単位で一意。
                              個別サイト向けの上書きはこのクラス配下で行う。
   2) 構造（場所）          : af-store-〇〇__△△ （margin/gap/gridなど配置のみ）
   3) 見た目（再利用パーツ） : af-store-btn / af-store-input / af-store-select /
                              af-store-card / af-store-tag など。
                              色・枠線・角丸・パディングを持つ使い回し部品。

   【必須ルール】
   - 出力されるすべての要素に、最低1つ「その箇所を特定できるクラス」
     （2の af-store-〇〇__△△ 系）を付与する。
     再利用パーツ(3)だけを付けた要素は作らない。
     例: <a class="af-store-btn af-store-btn--primary af-store-card__btn af-store-card__btn--detail">
         → 全ボタン共通の調整は af-store-btn、
           カードの「詳細を見る」だけの調整は af-store-card__btn--detail で狙える。
   - このCSSでは要素型セレクタ（th / td / img / form など）を使わない。
     必ずクラスで指定する。PHPを触らずCSSだけで上書きできる状態を保つため。
   ========================================================= */

/* --- Variables --- */
:root {
    /* サイトテーマ(Lightning等のキーカラー)を優先し、なければ独自の色を使用 */
    --af-primary-color: var(--vk-color-primary, var(--wp--preset--color--primary, #0056b3));
    --af-primary-dark: var(--vk-color-primary-dark, #004494);
    --af-secondary-color: var(--vk-color-secondary, var(--wp--preset--color--secondary, #6c757d));
    --af-accent-color: var(--vk-color-accent, var(--wp--preset--color--accent, #28a745));
    --af-accent-dark: #218838;
    --af-danger-color: #dc3545;

    /* カスタムボタン1・2（管理画面のボタン設定で上書きされる） */
    --af-btn1-color: #ff8c00;
    --af-btn2-color: #06c755;
    --af-bg-color: var(--wp--preset--color--background, #f4f7f6);
    --af-card-bg: var(--wp--preset--color--base, #ffffff);
    --af-text-main: var(--wp--preset--color--text, #333333);
    --af-text-muted: #666666;
    --af-border-color: #e0e0e0;
    --af-font-size-sm: 0.85rem;
    --af-font-size-base: 1rem;
    --af-font-size-lg: 1.2rem;
    --af-font-size-xl: 1.8rem;
    --af-radius-sm: 4px;
    --af-radius-md: 20px;
    --af-radius-lg: 12px;
    /* 店舗写真（一覧カード・詳細ページのメイン画像）の縦横比。ここを変えるだけで両方に反映される */
    --af-photo-ratio: 2 / 3;
    --af-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
    --af-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --af-shadow-lg: 0 8px 15px rgba(0, 0, 0, 0.12);
    --af-gap-sm: 0.5rem;
    --af-gap-md: 1rem;
    --af-gap-lg: 2rem;
    --af-gap-xl: 2rem;
    --af-transition: 0.2s ease;

    /* ボタンのクリック（タップ）領域の高さ */
    --af-btn-min-height: 56px;
    --af-btn-min-height-sm: 48px;

    /* --- アイコン（Font Awesome 7 Free / Solid のコードポイント） ---
       アイコンはすべてCSSの疑似要素で出力しているため、
       導入先サイトのデザインに合わせたい場合はここの値を書き換えるだけで差し替えられます。 */
    --af-icon-search: "\f002";      /* 虫眼鏡 magnifying-glass */
    --af-icon-arrow-right: "\f101"; /* » angles-right（サイトのページネーションに合わせた矢印） */
    --af-icon-arrow-left: "\f100";  /* « angles-left */
    --af-icon-angle-down: "\f107";  /* ▼ angle-down */
    --af-icon-route: "\f4d7";       /* 経路 route */
    --af-icon-phone: "\f095";       /* 電話 phone */
    --af-icon-fax: "\f1ac";         /* FAX fax */
    --af-icon-external: "\f35d";    /* 外部リンク up-right-from-square */
    --af-icon-gap: 0.4em;           /* アイコンと文字の間隔 */
}

/* =========================================================
   アイコン（Font Awesome 7 Free / テーマ側で読み込み済み）
   ---------------------------------------------------------
   HTMLに <i> を置かず、CSSの疑似要素で出力する。
   アイコンの有無・種類はこのCSSだけで差し替えられる。
   ========================================================= */
.af-store-btn::before,
.af-store-btn::after,
.af-store-page-btn::before,
.af-store-page-btn::after,
.af-store-card__tel::before,
.af-store-single__tel::before,
.af-store-single__fax::before,
.af-store-search-feature__select-wrap::after {
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    line-height: 1;
}

/* どのボタンにどのアイコンを出すか（追加・変更・削除はこのブロックだけで完結） */
.af-store-search-form__btn--location::before { content: var(--af-icon-search); }
.af-store-card__btn--detail::after           { content: var(--af-icon-arrow-right); }
.af-store-card__btn--route::before           { content: var(--af-icon-route); }
.af-store-single__btn--route::before         { content: var(--af-icon-route); }
.af-store-search-feature__select-wrap::after { content: var(--af-icon-angle-down); }

.af-store-card__tel::before,
.af-store-single__tel::before {
    content: var(--af-icon-phone);
    margin-right: var(--af-icon-gap);
}
.af-store-single__fax::before {
    content: var(--af-icon-fax);
    margin-right: var(--af-icon-gap);
}
/* カスタムボタン1・2は新しいタブで開く外部リンクなので、末尾に外部リンクアイコンを付ける */
.af-store-single__btn--custom1::after,
.af-store-single__btn--custom2::after {
    content: var(--af-icon-external);
    margin-left: var(--af-icon-gap);
}
.af-store-single__btn--back::before {
    content: var(--af-icon-arrow-left);
    margin-right: var(--af-icon-gap);
}
.af-store-page-btn--prev::before {
    content: var(--af-icon-arrow-left);
    margin-right: var(--af-icon-gap);
}
.af-store-page-btn--next::after {
    content: var(--af-icon-arrow-right);
    margin-left: var(--af-icon-gap);
}

/* --- Button --- */
.af-store-btn {
    transition:.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    /* クリック（タップ）領域。高さ・余白はこの2行で一括調整できる */
    min-height: var(--af-btn-min-height);
    padding: 0.9em var(--af-gap-md);
    border: 1px solid transparent;
    border-radius: var(--af-radius-sm);
    color: #fff;
    font-size: var(--af-font-size-base);
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
    cursor: pointer;
    transition: var(--af-transition);
    box-sizing: border-box;
}
.af-store-btn:hover {
    color: #fff;
    text-decoration: none;
    border-color: #bbb;
}
.af-store-btn--primary {
    background-color: var(--af-primary-color);
    border-color: var(--af-primary-color);
}
.af-store-btn--primary:hover {
    background-color: var(--af-primary-dark);
}
.af-store-btn--accent {
    background: none;
    color: unset;
    border: solid 2px #ddd;
}
.af-store-btn--accent:hover {
    color: var(--af-accent-dark);
}
.af-store-btn--secondary {
    background-color: var(--af-secondary-color);
    border-color: var(--af-secondary-color);
}
.af-store-btn--secondary:hover {
    filter: brightness(0.9);
}
.af-store-btn--dark {
    background-color: #555;
    border-color: #555;
}
.af-store-btn--dark:hover {
    background-color: #333;
}
.af-store-btn--custom1 {
    background-color: var(--af-btn1-color);
    border-color: var(--af-btn1-color);
}
.af-store-btn--custom2 {
    background-color: var(--af-btn2-color);
    border-color: var(--af-btn2-color);
}
.af-store-btn--custom1:hover,
.af-store-btn--custom2:hover {
    filter: brightness(0.9);
}
.af-store-btn--block {
    flex: 1 1 160px;
}
.af-store-btn--lg {
    padding: 0.9em 2rem;
    min-width: 150px;
}
.af-store-btn--sm {
    min-height: var(--af-btn-min-height-sm);
    padding: 0.6em var(--af-gap-sm);
    font-size: var(--af-font-size-sm);
}
.af-store-btn--location-active {
    background-color: var(--af-accent-dark);
    border-color: var(--af-accent-dark);
}
.af-store-btn:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

/* --- Form controls --- */
.af-store-label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: var(--af-text-muted);
    font-size: var(--af-font-size-sm);
}
.af-store-input,
.af-store-select {
    padding: 0 0.6rem;
    border: 1px solid var(--af-border-color);
    border-radius: var(--af-radius-sm);
    font-size: var(--af-font-size-base);
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    line-height: 42px;
    background-color: var(--af-card-bg);
    color: var(--af-text-main);
}

/* --- Tag / Badge --- */
.af-store-tag {
    display: inline-block;
    font-size: 13px;
    background: #ededed;
    color: #555;
    margin-right: 4px;
    margin-bottom: 4px;
    padding: .2em 0.7em;
    /* border-radius: 12px; */
}
.af-store-tag--company {
    background: #f1f3f5;
    color: #495057;
}
.af-store-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.9);
    color: var(--af-primary-color);
    padding: 4px 8px;
    border-radius: var(--af-radius-sm);
    font-size: var(--af-font-size-sm);
    font-weight: bold;
    box-shadow: var(--af-shadow-sm);
}
.af-store-badge--distance {
    position: absolute;
    top: 10px;
    left: 10px;
}

/* =========================================================
   検索フォーム [store_search_form]
   ========================================================= */
.af-store-search-form {
    background: var(--af-card-bg);
    padding: var(--af-gap-lg);
    border-radius: var(--af-radius-md);
    box-shadow: var(--af-shadow-sm);
    margin-bottom: var(--af-gap-xl);
    border: 1px solid var(--af-border-color);
}
.af-store-search-form__grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--af-gap-md);
    align-items: flex-end;
}
.af-store-search-form__field {
    display: flex;
    flex-direction: column;
    flex: 1 1 150px;
}
.af-store-search-form__field--actions {
    flex-basis: 100%;
    margin-top: 0.5rem;
}
.af-store-search-form__actions {
    display: flex;
    gap: var(--af-gap-md);
    width: 100%;
    flex-wrap: wrap;
}

/* =========================================================
   都道府県ボタン [store_search_area]
   ---------------------------------------------------------
   .af-store-area-btn / .af-store-area-btn--t{ID} は見た目を持たない
   フック用クラス。ボタンごとに色を変えたい場合はこのユニーククラス
   （term_idごと）に background-color 等をこのファイルで追記する。
   ========================================================= */
.af-store-search-area {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: var(--af-gap-xl);
}
.af-store-search-area__item {
    flex: 1 1 120px;
}
@media (max-width: 600px) {
    .af-store-search-area__item {
        flex-basis: 48%;
    }
}

/* =========================================================
   特徴タグ選択＋検索ボタン [store_search_feature]
   ========================================================= */
.af-store-search-feature {
    display: flex;
    gap: var(--af-gap-md);
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: var(--af-gap-xl);
}
.af-store-search-feature__select-wrap {
    position: relative;
    flex: 1 1 240px;
}
.af-store-search-feature__select {
    height: 100%;
    padding: 0 2.5rem 0 1rem;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.af-store-search-feature__submit {
    flex: 0 0 auto;
}

/* =========================================================
   一覧・地図 [store_locator]
   ========================================================= */
.af-store-locator__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--af-gap-md);
    border-bottom: 2px solid var(--af-primary-color);
    padding-bottom: var(--af-gap-sm);
}
.af-store-locator__count {
    font-size: var(--af-font-size-lg);
    font-weight: bold;
}
.af-store-locator__map {
    height: 400px;
    width: 100%;
    border-radius: var(--af-radius-md);
    margin-bottom: var(--af-gap-xl);
    z-index: 1;
}
.af-store-locator__map--hidden {
    display: none;
}
.af-store-locator__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--af-gap-lg);
}
.af-store-locator__pagination {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: var(--af-gap-xl);
}
.af-store-page-btn {
    padding: 8px 12px;
    border: 1px solid var(--af-border-color);
    background: var(--af-card-bg);
    color: var(--af-text-main);
    border-radius: var(--af-radius-sm);
    cursor: pointer;
    transition: background-color var(--af-transition);
}
.af-store-page-btn--active {
    background: var(--af-primary-color);
    color: #fff;
    border-color: var(--af-primary-color);
}

/* --- Store Card --- */
.af-store-card {
    background: var(--af-card-bg);
    border-radius: var(--af-radius-md);
    overflow: hidden;
    border: 1px solid var(--af-border-color);
    display: flex;
    flex-direction: column;
    position: relative;
}
.af-store-card__image {
    display: block;
    position: relative; /* 都道府県ピルの配置基準 */
}
/* サムネイルに重ねる都道府県ラベル。位置調整はこの1箇所で行う */
.af-store-card__pref {
    position: absolute;
    left: var(--af-gap-sm);
    bottom: var(--af-gap-sm);
    z-index: 2;
    margin: 0;
}
.af-store-card__img {
    width: 100%;
    aspect-ratio: var(--af-photo-ratio);
    object-fit: cover;
    background-color: #f0f0f0;
}
.af-store-card__body {
    padding: var(--af-gap-lg);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.af-store-card__title {
    margin: 0 0 var(--af-gap-sm) 0;
    font-size: 1.25rem;
    color: var(--af-text-main);
    font-family: var(--en);
}
/* 店名リンク：カード内で下線を持つのはここだけ */
.af-store-card__title-link {
    color: inherit;
    text-decoration: underline;
}
/* カード全体を店名リンク（＝詳細ページ）のクリック領域にする。
   透明な面を重ねるだけなので、カード自体のhover演出は発生しない */
.af-store-card__title-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* 上のクリック面より手前に出す要素（個別リンクとして機能させる） */
.af-store-card__tel,
.af-store-card__btn {
    position: relative;
    z-index: 2;
}
.af-store-card__tags {
    margin-bottom: var(--af-gap-sm);
}
.af-store-card__detail {
    margin-bottom: var(--af-gap-sm);
}
.af-store-card__tel {
    text-decoration: none;
    color: unset;
    font-weight: bold;
}
.af-store-card__actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--af-gap-sm);
    padding-top: var(--af-gap-md);
}
.af-store-card__actions-row {
    display: flex;
    gap: var(--af-gap-sm);
    flex-wrap: wrap;
}
.af-store-card__actions-row .af-store-btn {
    flex: 1;
    min-width: 180px; /* 各ボタンがこれを下回りそうになったら折り返し、縦並びフル幅になる */
}
.af-store-card__actions-stack {
    display: flex;
    flex-direction: column;
    gap: var(--af-gap-sm);
}

/* --- 地図マーカーのポップアップ --- */
.af-store-popup {
    min-width: 200px;
}
.af-store-popup__title {
    margin: 0 0 5px 0;
    font-size: 14px;
}
.af-store-popup__address {
    margin: 0 0 10px 0;
    font-size: 12px;
}
.af-store-popup__link {
    display: block;
    text-align: center;
    background: var(--af-primary-color);
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    text-decoration: none;
}

/* --- カスタムボタンショートコード [af_store_btn1] / [af_store_btn2] --- */
.af-store-custom-btn-wrap {
    margin: 1em 0;
}
.af-store-custom-btn-wrap .af-store-btn {
    box-shadow: var(--af-shadow-sm);
}

/* =========================================================
   店舗詳細ページ
   ========================================================= */
.af-store-single {
}
.af-store-single__header {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--af-gap-md);
}
.af-store-single__company {
    display: inline-block;
    margin-bottom: var(--af-gap-sm);
    order: 1;
    background: none;
    font-size: 1rem;
    padding: 0;
}
.af-store-single__title {
    margin-bottom: var(--af-gap-lg);
    font-size: 2rem;
    order: 2;
}
/* 特徴タグ（基本情報テーブルの「特徴」欄に入る） */
.af-store-single__tags {
    margin-bottom: calc(var(--af-gap-sm) * -1); /* タグ側のmargin-bottom分を相殺 */
}
.af-store-single__gallery {
    margin-bottom: var(--af-gap-xl);
}
.af-store-single__gallery-main {
    width: 100%;
    aspect-ratio: var(--af-photo-ratio);
    overflow: hidden;
    background-color: #f0f0f0; /* containで生まれる余白をグレーで塗る */
    border-radius: var(--af-radius-md);
}
.af-store-single__gallery-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.3s ease;
}
.af-store-single__gallery-img.is-fading {
    opacity: 0;
}
.af-store-single__gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--af-gap-xl);
}
.af-store-single__gallery-thumb {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: var(--af-radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all var(--af-transition);
}
.af-store-single__gallery-thumb--active {
    border-color: var(--af-primary-color);
    opacity: 1;
}
.af-store-single__gallery-thumb:hover {
    opacity: 0.9;
}
.af-store-single__gallery-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.af-store-single__message {
    margin-bottom: var(--af-gap-xl);
}
.af-store-single__section {
    margin-top: var(--af-gap-xl);
    margin-bottom: var(--af-gap-xl);
}
.af-store-single__section-title {
    /* color: #333; */
    /* border-bottom: 2px solid var(--af-primary-color); */
    /* padding-bottom: var(--af-gap-sm); */
    /* margin-top: 0; */
    /* margin-bottom: var(--af-gap-md); */
    /* font-size: 1.3rem; */
}
/* 基本情報・アクセス情報の表。セルは1要素1クラス、特定は「行クラス × セルクラス」で行う
   例: .af-store-single__table-row--tel .af-store-single__table-td */
.af-store-single__table {
    width: 100%;
    border-collapse: collapse;
}
.af-store-single__table-th,
.af-store-single__table-td {
    padding: var(--af-gap-md) 0;
    border-bottom: 1px solid var(--af-border-color);
}
.af-store-single__table-th {
    text-align: left;
    width: 7rem;
    color: #555;
    font-weight: bold;
}
.af-store-single__table-td {
    color: var(--af-text-main);
}
.af-store-single__tel {
    font-size: 1.1rem;
    color: var(--af-primary-color);
    text-decoration: none;
}
/* FAXはリンクではないので色は付けず、文字の大きさだけ電話番号に揃える */
.af-store-single__fax {
    font-size: 1.1rem;
}
.af-store-single__note-lead {
    font-weight: bold;
    margin: 0 0 var(--af-gap-sm) 0;
}
.af-store-single__note-link {
    color: var(--af-primary-color);
    text-decoration: underline;
}
.af-store-single__note {
    color: var(--af-text-muted);
}
.af-store-single__map-address {
    margin: 0 0 var(--af-gap-md) 0;
}
.af-store-single__map {
    width: 100%;
    height: 550px;
    border: 0;
    border-radius: var(--af-radius-md);
    margin-bottom: var(--af-gap-md);
}
/* 地図直下（カスタムボタン・ここからの経路検索を横並び） */
.af-store-single__map-actions {
    display: flex;
    justify-content: center;
    gap: var(--af-gap-md);
    flex-wrap: wrap;
}
/* 写真・基本情報カラムの直下に置くカスタムボタン（予約など） */
.af-store-single__custom-actions {
    display: flex;
    justify-content: center;
    gap: var(--af-gap-md);
    flex-wrap: wrap;
    margin-bottom: var(--af-gap-xl);
}
.af-store-single__divider {
    border: 0;
    border-top: 1px solid var(--af-border-color);
    margin: var(--af-gap-xl) 0;
}
/* ページ最下部（一覧に戻る） */
.af-store-single__actions {
    display: flex;
    justify-content: center;
    gap: var(--af-gap-md);
    flex-wrap: wrap;
}

/* --- Hours Table（営業時間）
   PC：素のtable。thead=曜日 / tbody=営業時間 の8列×2行。行の高さ揃え・上下中央揃えはtableに任せる。
   SP：同じDOMのまま、tableをGridにしてthead/tbody/trをdisplay:contentsで透明化。
       grid-auto-flow:column + 8行固定で、曜日8個→1列目、営業時間8個→2列目に流し込み、2列×8行にする。
       （曜日と営業時間が同じ行トラックを共有するので、時間が2行に折り返しても横の対応がずれない）
   テーマ側のth/tdスタイルに負けないよう、セルは親クラス付きで指定する。 */
.af-store-hours-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid var(--af-border-color);
    margin: 0 0 1rem;
    font-size: 0.875em;
}
.af-store-hours-table .af-store-hours-table__day,
.af-store-hours-table .af-store-hours-table__hours {
    padding: 0.6em 0.4em;
    border: 1px solid var(--af-border-color);
    text-align: center;
    vertical-align: middle;
}
.af-store-hours-table .af-store-hours-table__day {
    background-color: #f9f9f9;
    color: #555;
    font-weight: bold;
}
.af-store-hours-table .af-store-hours-table__hours {
    background-color: transparent;
    color: var(--af-text-main);
    font-weight: normal;
}
/* 土=青、日・祝=赤はカレンダーの慣習色。ブランド色や警告色とは別物なので直値で持つ */
.af-store-hours-table .af-store-hours-table__day--sat { color: #0d6efd; }
.af-store-hours-table .af-store-hours-table__day--sun,
.af-store-hours-table .af-store-hours-table__day--hol { color: #dc3545; }

@media (max-width: 767px) {
    .af-store-hours-table {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: repeat(8, auto); /* 曜日の数（月〜日＋祝）。曜日を増減したらここも合わせる */
        grid-auto-flow: column;
    }
    .af-store-hours-table__head,
    .af-store-hours-table__body,
    .af-store-hours-table__row {
        display: contents;
    }
    /* Grid化するとborder-collapseが効かず二重線になるので、下線と区切り線だけ引き直す */
    .af-store-hours-table .af-store-hours-table__day,
    .af-store-hours-table .af-store-hours-table__hours {
        display: flex;
        align-items: center;
        padding: 0.6em 1em;
        border: 0;
        border-bottom: 1px solid var(--af-border-color);
    }
    .af-store-hours-table .af-store-hours-table__day {
        justify-content: center;
        border-right: 1px solid var(--af-border-color);
    }
    .af-store-hours-table .af-store-hours-table__hours {
        text-align: left;
    }
    .af-store-hours-table .af-store-hours-table__day:last-child,
    .af-store-hours-table .af-store-hours-table__hours:last-child {
        border-bottom: 0;
    }
}

/* --- Two Column Layout --- */
@media (min-width: 768px) {
    .af-store-single--two-column .af-store-single__content {
        display: flex;
        gap: var(--af-gap-xl);
        align-items: flex-start;
    }
    .af-store-single--two-column .af-store-single__gallery {
        flex: 1;
        min-width: 0;
        position: sticky;
        top: var(--af-gap-xl);
        margin-bottom: 0;
    }
    .af-store-single--two-column .af-store-single__info {
        flex: 1.2;
        min-width: 0;
    }
}

/* --- Responsive (Mobile) --- */
@media (max-width: 768px) {
    .af-store-single__title {
        font-size: 1.5rem;
    }
    .af-store-single__gallery-main {
    }
    .af-store-single__gallery-thumbs {
        gap: 6px;
    }
    .af-store-single__gallery-thumb {
        width: 64px;
        height: 64px;
    }

}