/* Job 11 — store sale cards, sale page and retailer hub (Deals365_Sale_Cards_Prototype) */
:root{
  --ss-teal:#1F6B72; --ss-deep:#143B41; --ss-grey:#6A7E82; --ss-rule:#DCE4E5; --ss-bg:#F4F7F7;
  --ss-sale:#C25A28; --ss-saleBg:#FDF3EC; --ss-saleRule:#F0D5C2;
  --ss-green:#0F7B4F; --ss-greenBg:#E8F5EE; --ss-amber:#8A6A18; --ss-amberBg:#FBF5E8;
}
.ss-page{background:var(--ss-bg);padding:22px 0 50px;color:var(--ss-deep)}
.ss-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:15px}

/* product deal card (for the hub and the sale page) */
.ss-card{background:#fff;border:1px solid var(--ss-rule);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;color:inherit;text-decoration:none}
.ss-card .ph{height:118px;background:#F7FAFA;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--ss-rule)}
.ss-card .ph img{max-height:100px;max-width:90%;object-fit:contain}
.ss-card .in{padding:11px 12px 12px;flex:1;display:flex;flex-direction:column;gap:6px}
.ss-ret{font-size:10.5px;color:var(--ss-grey);text-transform:uppercase;letter-spacing:.5px}
.ss-ttl{font-size:12.5px;font-weight:500;line-height:1.4;margin:0}
.ss-prices{display:flex;align-items:baseline;gap:7px;margin-top:2px}
.ss-now{font-size:17px;font-weight:700}
.ss-was{font-size:11.5px;color:var(--ss-grey);text-decoration:line-through}
.ss-off{font-size:11px;font-weight:600;color:var(--ss-green);background:var(--ss-greenBg);padding:2px 6px;border-radius:4px}
.ss-score{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--ss-green);background:var(--ss-greenBg);padding:3px 8px;border-radius:12px;align-self:flex-start}
.ss-trk{font-size:10.5px;color:var(--ss-grey);line-height:1.4;margin-top:auto;padding-top:6px}
.ss-go{display:block;text-align:center;background:var(--ss-teal);color:#fff !important;font-size:12px;font-weight:500;padding:8px;border-radius:6px;text-decoration:none;margin-top:8px}

/* store sale card — must never look like a product deal: orange, no price, untracked line always shown */
.ss-sale{background:#fff;border:1px solid var(--ss-saleRule);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;position:relative}
.ss-sale .band{height:118px;background:var(--ss-saleBg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-bottom:1px solid var(--ss-saleRule);padding:10px;text-decoration:none}
.ss-sale .ss-mark{font-size:14px;font-weight:700;color:var(--ss-deep);letter-spacing:-.2px;text-transform:uppercase}
.ss-sale .ss-big{font-size:21px;font-weight:700;color:var(--ss-sale);line-height:1.1;text-align:center;letter-spacing:-.4px}
.ss-sale.bf .band{background:#2A2A2E}
.ss-sale.bf .ss-mark{color:#fff}
.ss-sale.bf .ss-big{color:#FFB36B}
.ss-sale .in{padding:11px 12px 12px;flex:1;display:flex;flex-direction:column;gap:6px}
.ss-sale .ss-ttl a{color:inherit;text-decoration:none}
.ss-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;background:var(--ss-saleBg);color:var(--ss-sale);padding:3px 8px;border-radius:12px;align-self:flex-start}
.ss-untracked{font-size:10.5px;color:var(--ss-grey);line-height:1.45;margin-top:auto;padding-top:6px;display:flex;gap:5px}
.ss-untracked .i{color:var(--ss-amber);font-weight:700}
.ss-ends{font-size:10.5px;color:var(--ss-amber);font-weight:500}
.ss-go.s{background:var(--ss-sale)}
.ss-codepill{display:flex;align-items:center;gap:6px;border:1px dashed var(--ss-saleRule);background:#fff;border-radius:6px;padding:6px 9px;font-size:11.5px}
.ss-codepill b{font-family:ui-monospace,Menlo,monospace;letter-spacing:.6px}
.ss-codepill button{margin-left:auto;font-size:10.5px;color:var(--ss-sale);font-weight:600;background:none;border:0;padding:0;cursor:pointer}
.ss-ribbon{position:absolute;top:9px;right:9px;background:var(--ss-deep);color:#fff;font-size:9.5px;font-weight:600;padding:3px 7px;border-radius:4px;letter-spacing:.4px;text-transform:uppercase}
.ss-sale.bf .ss-ribbon{background:var(--ss-sale)}
.ss-sale.ended{opacity:.5}
.ss-sale.ended .ss-ribbon{background:var(--ss-grey)}
.ss-sale.ended .ss-chip{background:#EEF1F1;color:var(--ss-grey)}
.ss-sale.ended .ss-ends,.ss-sale.ended .ss-untracked .i{color:var(--ss-grey)}
.ss-sale.ended .ss-go{background:#E6EBEB;color:var(--ss-grey) !important}

/* retailer hub */
.ss-hubhead{display:flex;gap:16px;align-items:center;padding:18px;border:1px solid var(--ss-rule);border-radius:10px;background:#fff;margin-bottom:18px}
.ss-hubhead .lg{width:62px;height:62px;border-radius:10px;background:var(--ss-saleBg);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--ss-sale);font-size:12px;flex:0 0 62px;overflow:hidden;text-transform:uppercase;text-align:center}
.ss-hubhead .lg img{max-width:100%;max-height:100%;object-fit:contain}
.ss-hubhead h1{font-size:19px;letter-spacing:-.3px;margin:0}
.ss-hubhead p{font-size:12.5px;color:var(--ss-grey);margin:3px 0 0;line-height:1.5;max-width:560px}
.ss-counts{display:flex;gap:18px;margin-top:9px;font-size:11.5px;color:var(--ss-grey);flex-wrap:wrap}
.ss-counts b{color:var(--ss-deep)}
.ss-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ss-rule);margin-bottom:16px;overflow-x:auto}
.ss-tabs button{padding:9px 14px;font-size:12.5px;color:var(--ss-grey);border:0;background:none;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.ss-tabs button.on{color:var(--ss-teal);border-bottom-color:var(--ss-teal);font-weight:600}
.ss-code{background:#fff;border:1px solid var(--ss-rule);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:6px}
.ss-empty{font-size:13px;color:var(--ss-grey);padding:14px 0}

/* sale page */
.ss-crumb{font-size:11.5px;color:var(--ss-grey);margin-bottom:12px}
.ss-crumb a{color:inherit}
.ss-hero{background:var(--ss-saleBg);border:1px solid var(--ss-saleRule);border-radius:10px;padding:22px;text-align:center;margin-bottom:16px}
.ss-hero.bf{background:#2A2A2E;border-color:#2A2A2E}
.ss-hero .ss-mark{font-size:15px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.ss-hero .big{font-size:30px;font-weight:700;color:var(--ss-sale);margin:7px 0;letter-spacing:-.6px}
.ss-hero.bf .ss-mark{color:#fff}.ss-hero.bf .big{color:#FFB36B}
.ss-facts{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.ss-facts > div{flex:1;min-width:150px;border:1px solid var(--ss-rule);border-radius:8px;padding:11px 13px;background:#fff}
.ss-facts .l{font-size:11.5px;color:var(--ss-grey)}
.ss-facts .v{font-size:14px;font-weight:600;margin-top:2px}
.ss-about{background:var(--ss-amberBg);border-left:4px solid #E8B23A;border-radius:7px;padding:12px 15px;font-size:12.5px;line-height:1.65;color:#5A4A1E;margin-bottom:16px}
.ss-mini{font-size:11.5px;color:var(--ss-grey)}
.ss-sec{font-size:14px;margin:26px 0 12px;color:var(--ss-teal);font-weight:600}
@media (max-width:575px){
  .ss-hubhead{flex-direction:column;align-items:flex-start}
  .ss-hero .big{font-size:24px}
}

.ss-sale .band.has-img{
    display:block !important;
    position:relative !important;
    padding:0 !important;
    height:auto !important;
    min-height:0 !important;
    background:#000;
    overflow:hidden;
    aspect-ratio:7/3;          /* band ni frame: image ni shape pramane badlo */
}
.ss-sale .band.has-img img{
    position:absolute !important;
    inset:0;
    width:100% !important;
    height:100% !important;
    max-width:none;
    object-fit:cover;          /* frame ma fit + crop; puri image jovi hoy to "contain" */
    display:block;
}
.ss-sale.ended .band.has-img img{filter:grayscale(1);opacity:.6}
.ss-sale .ss-band {
    height: 118px;
    background: var(--ss-saleBg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-bottom: 1px solid var(--ss-saleRule);
    padding: 10px;
    text-decoration: none;
}