/* =========================================================================================
 * Homepage product sections · Option 4 "Conversion Premium" (inc/home-products.php)
 * Sections, rows and grid only: the product card itself (.ward-pcard) is shared and lives in catalog.css.
 * ========================================================================================= */
:root{--ward-build-home-products:"2.6.0"}   /* TEMPORARY delivery marker, read by the console check in functions.php */

/* Section head: title, "View all", previous / next (rows, desktop) */
.ward-hp-head{display:flex;align-items:flex-end;gap:12px 16px;margin-bottom:18px}
.ward-hp-htext{flex:1;min-width:0}
.ward-hp-head h2{margin:0;font-size:clamp(20px,2vw,25px);font-weight:800;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.ward-hp-tools{display:flex;align-items:center;gap:14px;flex:none}
.ward-hp-all{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-size:14px;font-weight:700;color:var(--ward-pink);white-space:nowrap}
.ward-hp-all:hover{color:var(--ward-pink-2)}
.ward-hp-arrows{display:flex;gap:6px}
.ward-hp-arrows[hidden]{display:none}
.ward-hp-arrows button{width:42px;height:42px;border-radius:12px;border:0;background:var(--ward-surface);color:var(--ward-ink);display:grid;place-items:center;cursor:pointer;padding:0;transition:background-color .15s,color .15s,opacity .15s}
.ward-hp-arrows button:hover:not(:disabled){background:var(--ward-ink);color:#fff}
.ward-hp-arrows button:disabled{opacity:.35;cursor:default}

/* Rows (horizontal, snap) and grid */
.ward-hp-row{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4 * 16px) / 5);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;list-style:none;margin:0 0 -18px;padding:2px 0 18px}
.ward-hp-row::-webkit-scrollbar{display:none}
.ward-hp-row>li{scroll-snap-align:start}
.ward-hp-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 16px;list-style:none;margin:0;padding:0}

/* Row end card */
.ward-hp-end a{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;border-radius:18px;background:var(--ward-surface-2);border:1px solid var(--ward-line-2);padding:20px;color:var(--ward-ink);transition:border-color .2s}
.ward-hp-end a:hover{color:var(--ward-ink);border-color:var(--ward-line)}
.ward-hp-end b{font-size:16px;font-weight:800;line-height:1.35;max-width:16ch;text-wrap:balance}
.ward-hp-end-icon{width:64px;height:64px;border-radius:50%;background:#fff;color:var(--ward-pink-2);display:grid;place-items:center;box-shadow:var(--shadow-1)}
.ward-hp-end-go{width:44px;height:44px;border-radius:50%;background:var(--ward-ink);color:#fff;display:grid;place-items:center;transition:background-color .2s}
.ward-hp-end a:hover .ward-hp-end-go{background:var(--ward-pink)}
.ward-hp-end.is-deal a{background:#fff;border-color:var(--ward-tint-line)}

/* Offers: soft pink deals panel */
.ward-hp-deal{background:linear-gradient(180deg,var(--ward-tint),#fff 78%);border:1px solid var(--ward-tint-line);border-radius:24px;padding:22px 22px 24px}
.ward-hp-chip{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;background:var(--ward-pink);color:#fff;font-size:13px;font-weight:800;line-height:1.3;padding:5px 12px;border-radius:var(--r-pill)}
.ward-hp-deal .ward-hp-arrows button{background:#fff}
.ward-hp-deal .ward-hp-arrows button:hover:not(:disabled){background:var(--ward-ink)}

/* Tablet */
@media (max-width:1023px){
  .ward-hp-row{grid-auto-columns:31%;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
  .ward-hp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ward-hp-deal .ward-hp-row{margin-inline:-22px;padding-inline:22px;scroll-padding-inline:22px}
}
/* Phones: every homepage product section is the Picked for you grid: 2 equal columns, no horizontal rail, same
   compact card (catalog.css). The "Shop all" end tile fills the free cell next to an odd last card, otherwise it
   becomes a slim full-width link bar. */
@media (max-width:767px){
  .ward-hp-arrows{display:none!important}
  .ward-hp-head{margin-bottom:14px}
  .ward-hp-row,.ward-hp-deal .ward-hp-row{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;
    overflow:visible;scroll-snap-type:none;overscroll-behavior-x:auto;margin:0;padding:0}
  .ward-hp-row>li{scroll-snap-align:none}
  .ward-hp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
  .ward-hp-deal{margin-inline:calc(-1 * var(--gutter));border-radius:0;border-inline:0;padding:20px var(--gutter) 22px}
  .ward-hp-end a{gap:10px;padding:14px;border-radius:18px}
  .ward-hp-end b{font-size:14px}
  .ward-hp-end-icon{width:52px;height:52px}
  .ward-hp-end-go{width:40px;height:40px}
  .ward-hp-end:nth-child(odd){grid-column:1 / -1}
  .ward-hp-end:nth-child(odd) a{flex-direction:row;justify-content:flex-start;text-align:start;padding:12px 14px}
  .ward-hp-end:nth-child(odd) b{flex:1;max-width:none}
  .ward-hp-end:nth-child(odd) .ward-hp-end-icon{width:44px;height:44px}
}

/* v3.1.6 · "View all" fill tile (ward_store_hp_fill): hidden on tablets and desktop; on phones shown only in an even
   position, i.e. next to a lone last card when the section has an odd number of products. It takes the free grid cell
   (left in Arabic, right in English) at the card's height; product cards are untouched. */
.ward-hp-end.ward-hp-fill{display:none}
@media (max-width:767px){
  .ward-hp-end.ward-hp-fill:nth-child(even){display:block}
}

/* A short row (e.g. a category with few products): the end card fills the free desktop slots */
@media (min-width:1024px){
  .ward-hp-end.is-wide{grid-column:span var(--hp-span,1)}
  .ward-hp-end.is-wide a{flex-direction:row;justify-content:flex-start;gap:20px;padding:28px 32px;text-align:start;background:linear-gradient(135deg,var(--ward-surface-2),#fff);}
  .ward-hp-end.is-wide b{font-size:clamp(18px,1.6vw,22px);max-width:18ch;flex:1}
  .ward-hp-end.is-wide .ward-hp-end-icon{width:76px;height:76px}
  .ward-hp-end.is-wide .ward-hp-end-go{width:52px;height:52px}
}

/* Explore More (v2.11.0): the grid above + "Load more". overflow-anchor keeps the page still while cards are added above
   the button (the browser would otherwise scroll to keep the button in view). */
.ward-hp-more{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:clamp(24px,3vw,36px);overflow-anchor:none}
.ward-hp-more-btn{min-width:min(100%,260px);min-height:48px;padding-inline:28px;border-radius:var(--r-pill)}
.ward-hp-more-btn:hover{background:var(--ward-ink);color:#fff}
.ward-hp-more-btn[hidden]{display:none}
.ward-hp-more-btn[aria-busy=true]{cursor:progress;background:#fff;color:var(--ward-ink)}
.ward-hp-more-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-inline-end-color:transparent;animation:ward-hp-spin .7s linear infinite}
.ward-hp-more-btn[aria-busy=true] .ward-hp-more-spin{display:inline-block}
@keyframes ward-hp-spin{to{transform:rotate(360deg)}}
.ward-hp-more-msg{margin:0;min-height:1.4em;font-size:13px;color:var(--ward-muted,#6b6b73);text-align:center}
.ward-hp-more-msg:not(.is-error){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}   /* success: announced, not shown */
.ward-hp-more-msg.is-error{color:var(--ward-pink-2)}
@media (prefers-reduced-motion:reduce){ .ward-hp-more-spin{animation-duration:2s} }
@media (max-width:767px){ .ward-hp-more-btn{width:100%} }