/* components.css — buttons, cards, CTA band, widgets, forms, breadcrumb */

/* Buttons */
.btn:hover{ transform:translateY(-1px); }
.btn--primary:hover{ background:var(--red-dark); border-color:var(--red-dark); box-shadow:0 8px 18px -6px rgba(224,43,38,.5); }
.btn--navy:hover{ background:var(--navy-deep); border-color:var(--navy-deep); }
.btn--outline:hover{ border-color:var(--navy); background:var(--navy); color:#fff; }
.btn--outline-white:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.btn--ghost:hover{ background:var(--bg-soft); }
.btn:active{ transform:translateY(0); }

/* Service card */
.scard{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); display:flex; flex-direction:column; box-shadow:var(--shadow-sm); transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); height:100%; overflow:hidden; }
.scard:hover{ box-shadow:var(--shadow); transform:translateY(-4px); border-color:var(--border-2); }
.scard__media{ position:relative; display:block; aspect-ratio:16/5; overflow:hidden; background:var(--bg-softer); }
.scard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease); }
.scard:hover .scard__media img{ transform:scale(1.05); }
.scard__cat{ position:absolute; left:12px; bottom:12px; background:rgba(14,22,56,.85); color:#fff; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 11px; border-radius:100px; backdrop-filter:blur(2px); }
.scard__pad{ padding:22px 24px 24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.scard__title{ font-size:19px; }
.scard__desc{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; margin:0; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.scard__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:4px; }

/* Product chip card */
.pchip{ display:flex; align-items:center; gap:14px; padding:18px 20px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); text-decoration:none; color:var(--navy); font-weight:700; transition:all .18s var(--ease); }
.pchip:hover{ border-color:var(--blue); box-shadow:var(--shadow); transform:translateY(-3px); }
.pchip__ic{ width:46px; height:46px; border-radius:10px; background:var(--bg-softer); color:var(--navy); display:grid; place-items:center; flex-shrink:0; }
.pchip__ar{ margin-left:auto; color:var(--red); }

/* CTA band */
.ctaband{ background:linear-gradient(120deg,var(--navy),var(--navy-deep)); }
.ctaband__in{ padding:52px 24px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.ctaband__btns{ display:flex; gap:14px; flex-wrap:wrap; }
@media (max-width:760px){ .ctaband__in{ flex-direction:column; align-items:flex-start; } .ctaband__btns{ width:100%; flex-direction:column; } .ctaband__btns .btn{ width:100%; } }

/* Breadcrumb */
.crumbs{ font-size:13.5px; color:var(--muted); display:flex; align-items:center; flex-wrap:wrap; }
.crumbs a{ color:#c9d2ee; font-weight:600; }
.crumbs a:hover{ color:#fff; }
.crumbs [aria-current]{ color:#fff; }

/* Hours widget */
.hours{ display:flex; flex-direction:column; }
.hours__row{ display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--border); font-size:14.5px; }
.hours__row:last-child{ border-bottom:0; }
.hours__row.is-today{ font-weight:700; color:var(--navy); }
.hours__row.is-today em{ color:var(--red); font-style:normal; font-weight:700; }
.hours__row strong{ font-weight:600; }
.hours__row strong.closed{ color:var(--muted); font-weight:500; }

/* Pickup widget */
.pickup{ display:flex; flex-direction:column; }
.pickup__row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--border); font-size:14.5px; }
.pickup__row:last-child{ border-bottom:0; }
.pickup__c{ display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-weight:600; }
.pickup__c i{ color:var(--blue); }
.pickup__row strong{ color:var(--navy); }

/* Forms */
.field{ display:flex; flex-direction:column; gap:7px; }
.field__label{ font-weight:600; font-size:14px; color:var(--navy); }
.field__label em{ color:var(--red); font-style:normal; }
.field__help{ font-size:12.5px; color:var(--muted); }
.input{ width:100%; padding:12px 14px; border:1.5px solid var(--border-2); border-radius:var(--radius-sm); font-family:inherit; font-size:15px; color:var(--ink); background:#fff; transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,91,208,.15); }
textarea.input{ resize:vertical; }

/* Panel / card surface */
.panel{ background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.panel__pad{ padding:28px; }