/* ============================================
   Daisy Drop（姉妹店）専用スタイル
   ※ Dasy モード時のみ読み込み
   ※ TOP画像・色味はこのファイルと assets/images/daisy-drop/ だけで調整
   ============================================ */

/* ---- ヘッダー ---- */
.pp-brand-daisy-hush .pp-header {
    border-bottom: none; /* Vector_nami を使うので線は付けない */
}

/* Daisy Drop：ログイン／ログアウト・アイコンホバー */
.pp-brand-daisy-hush .pp-header__btn--outline {
    border-color: #f998bf;
    color: #f998bf;
}
.pp-brand-daisy-hush .pp-header__btn--outline:hover {
    background: #f998bf;
    color: #fff;
}
.pp-brand-daisy-hush .pp-header__icon:hover {
    color: #f998bf;
}

/* ---- メイン背景 ---- */
.dh-main {
    background: linear-gradient(180deg, #f3f1ee 0%, #faf9f7 40%, #ffffff 100%);
}

/* ---- TOP（Poppy の .pp-hero と同じ構成・見た目はここだけで変更） ---- */
.dh-hero {
    position: relative;
    /* ヘッダー高さ（Daisy専用・Poppyの変数とは同期しない）
       14+36+14 = バーpadding + ロゴ */
    --dh-header-h: 64px;
    /* 背景グリッドをヘッダー裏へ回す */
    margin-top: calc(-1 * var(--dh-header-h));
    /* 背景は back_shikaku.png のみ・タイル状 */
    background-color: transparent;
    background-image: url(../images/daisy-drop/back_shikaku.png);
    background-repeat: repeat;
    background-position: top left;
    background-size: calc(160px / 3 * 0.62) calc(166px / 3 * 0.62);
    overflow: hidden;
    z-index: 5;
}

.dh-hero::before {
    content: none; /* グラデ重ねは使わない */
}

.dh-hero__illust {
    position: relative;
    margin: 0 auto;
    border-bottom: 2px dashed #c4b8a8;
    width: 100%;
}

.dh-hero__illust-img {
    display: block;
    width: 100%;
    max-width: 950px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    /* ヘッダー分の最低高さを確保（画像が縮んでもこの余白は維持） */
    margin-top: var(--dh-header-h);
}

/* ヘッダー高さ：レスポンシブ（style.css のヘッダー実寸に合わせる） */
@media (max-width: 768px) {
    .dh-hero {
        --dh-header-h: 50px; /* 10+30+10 */
    }
}
@media (max-width: 450px) {
    .dh-hero {
        --dh-header-h: 42px; /* 8+26+8 */
    }
}

/* 下部のチェック柄は使わない（背景は back_shikaku のみ） */
.dh-hero__check {
    display: none;
}

/* ---- 人気グッズ ---- */
.dh-popular {
    padding-bottom: 48px;
}

.dh-popular .pp-section-title {
    margin-bottom: 24px;
}

.dh-popular__empty {
    width: 100%;
    text-align: center;
    color: #8a8178;
    padding: 24px;
}

/* ---- 「すべての商品を見る」ボタン ----
   形は Poppy の .pp-popular__all と同じ。
   色はここだけで直す（Poppy の CSS変数とは同期しない）
   お花SVG: assets/images/daisy-drop/f_by.svg（花びら#8ab5ca／中心#f998bf） */
.dh-popular__all {
    background-color: #bb94d0;
    border-color: #f998bf;
    color: #fff;
}
.dh-popular__all:hover {
    background-color: #f998bf;
    border-color: #8ab5ca;
    color: #fff;
    box-shadow: 0 4px 12px rgba(187, 148, 208, 0.35);
}
.dh-popular__all .pp-btn {
    color: #fff;
}
.dh-popular__all:hover .pp-btn {
    color: #fff;
}

/* ---- シール（上書きしたいとき用） ---- */
.dh-stickers {
    /* 例: background: #faf9f7; */
}

/* ---- インフォメーション（上書きしたいとき用） ---- */
.dh-info {
    /* 例: background: #fff; */
}

.dh-info .pp-info__title:hover {
    color: #6b635a;
}