/* =====================================================================
   HOME PAGE — store hours, delivery zones, policies card
   (loaded only by index.html, after base.css)
   ===================================================================== */

/* Home hero is taller: the store hours card overlaps its bottom edge */
.page-home .hero { min-height: clamp(560px, 92vh, 960px); padding-bottom: 140px; }

/* Home page: policies sit in a white card */
.disclaimer-container.card-style {
    max-width: 1050px; background: var(--card-bg); padding: 40px; border-radius: var(--radius);
    box-shadow: var(--shadow); border-top: 5px solid var(--primary);
}

.card-style .disclaimer-title { font-size: 1.6rem; }

.card-style .disclaimer-list { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px 35px; }

.card-style .disclaimer-list li { color: #555; }

.page-home .disclaimer-section { padding: 20px var(--gutter) 100px; }

/* ---------- HOME: STORE HOURS ---------- */
.hours-container { padding: 0 var(--gutter); margin-top: -90px; position: relative; z-index: 10; }

.hours-card {
    background: var(--card-bg); max-width: 1200px; margin: 0 auto; padding: 35px 30px;
    border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border-top: 6px solid var(--primary); text-align: center;
}

.hours-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-bottom: 25px; }

.hours-card h2 { color: var(--text-dark); font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem); display: inline-flex; align-items: center; gap: 10px; }

.hours-card h2 i { color: var(--primary); }

.open-status {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 50px;
    font-weight: 600; font-size: 0.95rem; background: #f1f1f1; color: #666;
}

.open-status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

.open-status.is-open { background: #eaf8e6; color: #1d8a00; }

.open-status.is-closed { background: var(--primary-soft); color: var(--primary); }

/* minmax(0, 1fr) keeps all 7 columns equal even when one day's text is longer */
.hours-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; --hours-scale: 1; }

.day-row {
    padding: 15px 8px; background: var(--bg-light); border-radius: 12px; transition: background 0.3s;
    display: flex; flex-direction: column; justify-content: center; border: 2px solid transparent; min-width: 0;
}

.day-row:hover { background: #f0ece6; }

/* Hours never wrap; JS (fitHours) shrinks all days together if space is tight */
.day-row h4, .day-row p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.day-row h4 { color: #666; font-weight: 600; margin-bottom: 6px; font-size: calc(1.05rem * var(--hours-scale)); }

.day-row p { font-weight: 700; color: var(--primary); font-size: calc(0.98rem * var(--hours-scale)); line-height: 1.35; }

.day-row.today { border-color: var(--primary); background: #fff; }

.day-row.today h4::after { content: ' · Today'; color: var(--primary); font-weight: 500; font-size: 0.85rem; }

/* ---------- HOME: HOLIDAY & SPECIAL CLOSURES ---------- */
/* This week's cards: the special hours replace the regular ones (regular hours come back while editing) */
.day-row .closure-hours { display: none; order: 2; }
.day-row.has-closure > p.editable { display: none; }
.day-row.has-closure .closure-hours { display: block; }
.day-row.has-closure:not(.today) { background: #fff; border-color: var(--primary-soft); }
.closure-tag {
    order: 3; align-self: center; max-width: 100%; margin-top: 6px; padding: 2px 9px; border-radius: 50px;
    background: var(--primary-soft); color: var(--primary); font-size: 0.72rem; font-weight: 700;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.editing-active .day-row.has-closure > p.editable { display: block; }
body.editing-active .day-row .closure-hours, body.editing-active .day-row .closure-tag { display: none; }

/* Upcoming closures listed under the hours */
.closures-notice { margin-top: 22px; text-align: left; background: var(--bg-light); border-radius: 12px; padding: 16px 18px; }
.closures-title { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
.closures-title i { font-size: 1.15rem; }
.closures-notice ul { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.closures-notice li, .cl-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 10px; padding: 10px 12px; border: 1px solid #eee7df; min-width: 0; }
.cl-date { flex: 0 0 46px; text-align: center; border-radius: 8px; background: var(--primary); color: #fff; padding: 5px 0 4px; line-height: 1.05; }
.cl-date b { display: block; font-size: 0.65rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; opacity: 0.85; }
.cl-date strong { font-size: 1.25rem; }
.cl-info { flex: 1; min-width: 0; }
.cl-info strong { display: block; color: var(--text-dark); font-size: 0.98rem; line-height: 1.3; }
.cl-info small { display: block; color: #777; font-size: 0.83rem; margin-top: 1px; }
.cl-status { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; padding: 4px 10px; border-radius: 50px; white-space: nowrap; }
.cl-status.closed { background: var(--primary-soft); color: var(--primary); }
.cl-status.special { background: #eaf8e6; color: #1d8a00; }

/* Control Panel: closures list builder */
.closures-admin { border: 1px solid #e6e1da; border-radius: 12px; margin: 10px 0 4px; background: #fff; text-align: left; }
.closures-admin summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 14px; font-weight: 600; font-size: 15px; }
.closures-admin summary::-webkit-details-marker { display: none; }
.cl-sum-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.cl-sum-title i { color: var(--primary); font-size: 1.3rem; }
.cl-count { font-size: 12px; font-weight: 700; background: var(--primary-soft); color: var(--primary); padding: 3px 10px; border-radius: 50px; white-space: nowrap; }
.cl-count.none { background: #f1f1f1; color: #888; }
.cl-chevron { font-size: 1.3rem; color: #888; transition: transform 0.2s; }
.closures-admin[open] .cl-chevron { transform: rotate(180deg); }
.cl-body { padding: 4px 14px 14px; border-top: 1px solid #eee; }
.cl-list { list-style: none; margin: 12px 0; display: grid; gap: 8px; }
.cl-item { background: var(--bg-light); border-color: transparent; padding: 8px 8px 8px 10px; }
.cl-item.is-new { border-color: #f0d9a8; background: #fffaf0; }
.cl-item em { font-style: normal; font-size: 11px; font-weight: 700; color: #9a6400; background: #fdeecf; padding: 1px 7px; border-radius: 50px; margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.cl-del { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: none; background: none; color: #999; font-size: 19px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: 0.2s; }
.cl-del:hover { background: #fdecec; color: var(--primary); }
.cl-empty { font-size: 14px; color: #888; background: var(--bg-light); border-radius: 10px; padding: 12px 14px; line-height: 1.5; }
.cl-unsaved { font-size: 13px; color: #8a5a00; background: #fff8ec; padding: 8px 12px; border-radius: 8px; margin: -2px 0 12px; }
.cl-add { border: 1px dashed #d9d3cb; border-radius: 10px; padding: 14px; }
.cl-add-title { font-weight: 700; margin-bottom: 10px; font-size: 15px; color: var(--text-dark); }
.cl-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cl-dates input { padding: 10px; min-height: 46px; min-width: 0; width: 100%; }
@media (max-width: 420px) { .cl-dates { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.cl-hours { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 12px; }
.cl-hours .to { font-size: 13px; color: #888; }
.cl-hours select { padding: 8px; border: 1px solid #ddd; border-radius: 6px; background: #fff; font-size: 14px; width: 100%; outline: none; }
.cl-add-btn { margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 6px; }

/* ---------- HOME: DELIVERY ---------- */
.delivery { padding: 100px var(--gutter) 60px; }

.delivery-filter { max-width: 600px; margin: 0 auto 15px; position: relative; }

.delivery-filter input {
    width: 100%; padding: 16px 48px 16px 50px; border-radius: 50px;
    border: 2px solid #eaeaea; font-size: 1.1rem; outline: none; transition: 0.3s;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); background: #fff;
}

.delivery-filter input:focus { border-color: var(--primary); box-shadow: 0 4px 20px rgba(129,20,25,0.1); }

.delivery-filter .bx-search { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: #888; pointer-events: none; }

#clear-search { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 24px; color: #999; cursor: pointer; display: none; }

#clear-search:hover { color: var(--primary); }

.search-status { max-width: 700px; margin: 0 auto 25px; text-align: center; min-height: 1.5em; color: #666; font-size: 1rem; line-height: 1.5; }

.search-status.warn { color: var(--warn); font-weight: 500; }

.search-status.none { color: var(--primary); font-weight: 500; }

.search-status a { color: var(--primary); font-weight: 600; text-decoration: underline; cursor: pointer; }

.delivery-list-container {
    max-width: 1050px; margin: 0 auto; background: var(--card-bg);
    border-radius: var(--radius); padding: 25px 35px; box-shadow: var(--shadow);
}

.list-head {
    display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 600;
    letter-spacing: 1.5px; text-transform: uppercase; color: #999; padding: 0 15px 10px; border-bottom: 2px solid #f0f0f0;
}

.delivery-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }

.delivery-item {
    display: flex; justify-content: space-between; align-items: center; gap: 15px;
    padding: 16px 15px; border-bottom: 1px solid #f0f0f0; transition: background 0.3s; border-radius: 8px;
}

.delivery-item:hover { background: var(--bg-light); }

.delivery-item.hidden { display: none; }

.delivery-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }

.delivery-city { font-size: 1.1rem; font-weight: 600; color: var(--text-dark); line-height: 1.3; }

.delivery-zips { display: none; font-size: 0.85rem; color: #777; margin-top: 4px; line-height: 1.4; word-break: break-word; }

.delivery-zips::before { content: 'Zips: '; font-weight: 600; color: #999; }

.delivery-zips:empty::after { content: 'none — add zip codes so customers can find this zone'; color: var(--warn); font-style: italic; }

.delivery-price-wrapper { font-size: 1.15rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; flex-shrink: 0; }

.delivery-price { min-width: 25px; display: inline-block; outline: none; }

body.editing-active .delivery-zips { display: block; }

body.editing-active .delivery-item:hover { background: transparent; }

.delivery-item.has-issue { background: #fff8ec !important; box-shadow: inset 3px 0 0 var(--warn); }

.delivery-action { text-align: center; margin-top: 35px; }

.day-group { display: grid; grid-template-columns: 85px 1fr auto 1fr auto; align-items: center; gap: 8px; margin-bottom: 8px; background: var(--bg-light); padding: 8px 10px; border-radius: 8px; }

.day-group > label { font-weight: 600; font-size: 14px; }

.day-group .to { font-size: 13px; color: #888; }

.day-group select { padding: 6px; border: 1px solid #ddd; border-radius: 6px; background: #fff; outline: none; font-size: 14px; width: 100%; }

.day-group.closed select { opacity: 0.4; pointer-events: none; }

.checkbox-wrapper { display: flex; align-items: center; gap: 5px; }

.checkbox-wrapper label { font-weight: 400; font-size: 13px; cursor: pointer; }

.delete-zone-btn { width: 34px; height: 34px; border-radius: 50%; background: none; font-size: 20px; }

.delete-zone-btn:hover { background: #fdecec; }

@media (max-width: 1180px) {
    .hours-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
    .day-row { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 18px; }
    .day-row h4 { margin-bottom: 0; }
    /* Name tag sits under the day name so the hours keep their full size */
    .day-row.has-closure { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; align-items: center; }
    .day-row.has-closure h4 { grid-column: 1; grid-row: 1; text-align: left; }
    .day-row.has-closure .closure-hours { grid-column: 2; grid-row: 1 / span 2; }
    .closure-tag { grid-column: 1; grid-row: 2; justify-self: start; margin: 0; }
    body.editing-active .day-row.has-closure { display: flex; }
}

@media (max-width: 768px) {
    .page-home .hero { min-height: clamp(520px, 88vh, 760px); padding-bottom: 110px; align-items: center; }
    .disclaimer-container.card-style { padding: 25px 20px; }
    .card-style .disclaimer-title { font-size: 1.35rem; }
    .page-home .disclaimer-section { padding: 10px var(--gutter) 70px; }
    .hours-container { margin-top: -70px; }
    .hours-card { padding: 28px 18px; }
    .hours-grid { grid-template-columns: 1fr; gap: 0; border: 1px solid #eaeaea; border-radius: 12px; overflow: hidden; }
    .day-row { border-radius: 0; padding: 12px 18px; border: none; border-bottom: 1px solid #eaeaea; background: #fff; }
    .day-row:last-child { border-bottom: none; }
    .closures-notice { padding: 14px 12px; }
    .closures-notice ul { grid-template-columns: 1fr; }
    .closures-notice li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; padding: 10px; }
    .closures-notice .cl-date { grid-row: 1 / span 2; align-self: center; }
    .closures-notice .cl-status { grid-column: 2; justify-self: start; }
    .day-row.today { background: var(--primary-soft); border: none; border-bottom: 1px solid #eaeaea; }
    .delivery { padding: 70px var(--gutter) 40px; }
    .delivery-list-container { padding: 15px 12px; }
    .delivery-list { grid-template-columns: 1fr; }
    .delivery-item { padding: 14px 10px; }
    .delivery-city { font-size: 1.05rem; }
    .list-head { padding: 0 10px 10px; }
    .day-group { grid-template-columns: 1fr 1fr; }
    .day-group > label { grid-column: 1; }
    .day-group .checkbox-wrapper { grid-column: 2; justify-self: end; }
    .day-group .to { display: none; }
}

@media (max-width: 480px) {
    .delivery-filter input { font-size: 1rem; padding: 14px 44px 14px 46px; }
    .delivery-filter .bx-search { left: 17px; }
}

/* Home hero: exact values from the designed home page */
.page-home .hero {
    --hero-overlay:
        linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.1) 100%),
        linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%);
    padding-top: calc(var(--header-h) + 40px);
}
.page-home .hero-content { max-width: 720px; }
.page-home .hero h1 { text-shadow: 0 4px 18px rgba(0,0,0,0.5); }
.page-home .hero p { color: rgba(255,255,255,0.95); margin-bottom: 35px; max-width: 600px; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.page-home .section-header h2 { font-size: clamp(2rem, 3vw + 1rem, 3rem); }
@media (max-width: 768px) {
    .page-home .hero {
        --hero-overlay: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.65) 100%);
        padding-top: calc(var(--header-h) + 30px);
    }
}

/* Hero photo (path is relative to this css/ folder) */
.page-home .hero { --hero-img: url('../images/hero.jpg'); }

/* Policies card: exact list spacing from the designed home page */
.card-style .disclaimer-title { font-weight: 700; }
.card-style .disclaimer-title i { font-size: 1.8rem; }
.card-style .disclaimer-list li { gap: 12px; }
.card-style .disclaimer-list li > i { font-size: 1.4rem; margin-top: 2px; }