/* CySuperStore — per-theme storefront decoration.
   Everything shared lives in storefront.css and reads the theme's CSS custom
   properties; this file only holds the FLAVOUR of each theme: how its hero is
   treated, how its product cards are built and the few decorative flourishes
   that make ten shops read as ten different shops.

   Selectors are keyed on the <body> classes the theme emits:
     sf-theme--<theme_key>   e.g. sf-theme--pet-playful
     sf-hero--<treatment>    banner | split | editorial | band | ribbon | minimal
     sf-card--<style>        soft | rounded | editorial | sharp | elevated      */

/* ------------------------------------------------------------ hero treatment */
/* banner: full bleed gradient band with a soft inner glow */
.sf-hero--banner .sf-hero {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
/* split: copy left, artwork panel right, hard divide */
.sf-hero--split .sf-hero { align-items: center; }
.sf-hero--split .sf-hero__art { background: rgba(255, 255, 255, .22); border-style: dashed; }
/* editorial: quiet background, big type, a hairline rule above the eyebrow */
.sf-hero--editorial .sf-hero {
  background-image: none;
  background: var(--sf-surface);
  color: var(--sf-text);
  border: 1px solid var(--sf-border);
  border-top: 3px solid var(--sf-accent);
  box-shadow: none;
  padding: 30px 22px;
}
.sf-hero--editorial .sf-hero__eyebrow { color: var(--sf-accent-dark); }
.sf-hero--editorial .sf-hero__sub,
.sf-hero--editorial .sf-hero__count { color: var(--sf-muted); }
.sf-hero--editorial .sf-hero__title { font-size: calc(30px * var(--sf-title-scale, 1)); }
.sf-hero--editorial .sf-hero__art {
  background: var(--sf-surface-2); border: 1px solid var(--sf-border);
  color: var(--sf-text);
}
/* band: dark strip, mono/condensed copy, everything uppercase */
.sf-hero--band .sf-hero {
  background-image: linear-gradient(90deg, var(--sf-hero-from) 0%, var(--sf-hero-to) 100%);
  border-radius: var(--sf-radius);
}
.sf-hero--band .sf-hero__title { text-transform: uppercase; letter-spacing: .01em; }
/* ribbon: festive angled ribbon behind the headline */
.sf-hero--ribbon .sf-hero {
  position: relative; overflow: hidden;
  background-image: linear-gradient(120deg, var(--sf-hero-from) 0%, var(--sf-hero-to) 100%);
}
.sf-hero--ribbon .sf-hero::after {
  content: ""; position: absolute; inset: auto -40px -46px auto;
  width: 240px; height: 120px; transform: rotate(-12deg);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 14px, transparent 14px 28px);
}
.sf-hero--ribbon .sf-hero__art { position: relative; z-index: 1; }
/* minimal: no background at all — type only */
.sf-hero--minimal .sf-hero {
  background: transparent; color: var(--sf-text); padding: 10px 0 24px;
  border-bottom: 1px solid var(--sf-border); border-radius: 0;
}
.sf-hero--minimal .sf-hero__eyebrow,
.sf-hero--minimal .sf-hero__sub,
.sf-hero--minimal .sf-hero__count { color: var(--sf-muted); }
.sf-hero--minimal .sf-hero__title {
  font-size: calc(34px * var(--sf-title-scale, 1)); letter-spacing: .01em;
}
.sf-hero--minimal .sf-hero__art { display: none; }

/* ------------------------------------------------------------- card styles */
/* soft: gentle lift, small radius */
.sf-card--soft .sf-card { box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 6px 18px rgba(16, 24, 40, .05); }
/* rounded: chunky, playful */
.sf-card--rounded .sf-card { padding: 14px; }
.sf-card--rounded .sf-card__actions { border-top: 0; }
.sf-card--rounded .sf-card__price { font-size: 17px; }
/* editorial: square, hairline, no shadow — the image does the talking */
.sf-card--editorial .sf-card { border-radius: 0; box-shadow: none; padding: 0 0 14px; }
.sf-card--editorial .sf-card__head { padding: 12px 12px 0; }
.sf-card--editorial .sf-card__desc,
.sf-card--editorial .sf-card__meta { padding: 0 12px; }
.sf-card--editorial .sf-card__actions { border-top: 0; padding: 12px; }
.sf-card--editorial .sf-card__art { --sf-art-radius: 0; }
/* sharp: technical, bordered, mono meta */
.sf-card--sharp .sf-card { border-width: 1px; box-shadow: none; }
.sf-card--sharp .sf-card__price { font-family: ui-monospace, Menlo, Consolas, monospace; }
.sf-card--sharp .sf-card__actions { border-top-style: dashed; }
/* elevated: strong shadow, punchy */
.sf-card--elevated .sf-card {
  box-shadow: 0 8px 22px rgba(16, 24, 40, .14);
  border-color: transparent;
}
.sf-card--elevated .sf-card__actions { border-top: 0; }

/* ---------------------------------------------------------- theme flavours */
/* house-01 Home & Living — calm, organic, generous air */
.sf-theme--home-calm .sf-section__title { letter-spacing: 0; }
.sf-theme--home-calm .sf-top { border-bottom: 1px solid var(--sf-border); }
.sf-theme--home-calm .sf-hero__art { border-style: solid; background: var(--sf-surface-2); color: var(--sf-text); }
.sf-theme--home-calm .sf-trust__list { list-style: "🌿  "; }

/* house-02 Pet Accessories — warm, playful, dotted */
.sf-theme--pet-playful .sf-top__mark { font-size: 26px; }
.sf-theme--pet-playful .sf-hero__art {
  background-image: radial-gradient(rgba(255, 255, 255, .5) 2px, transparent 2.5px);
  background-size: 14px 14px;
}
.sf-theme--pet-playful .sf-card { border-width: 2px; }
.sf-theme--pet-playful .sf-promo__tag { background: var(--sf-accent-soft); }
.sf-theme--pet-playful .sf-section__title::after { content: " 🐾"; }

/* house-03 Beauty & Self-Care — soft, editorial, small caps */
.sf-theme--beauty-editorial .sf-section__title,
.sf-theme--beauty-editorial .sf-page-title { font-style: normal; letter-spacing: .02em; }
.sf-theme--beauty-editorial .sf-section__head { border-bottom-color: var(--sf-border); }
.sf-theme--beauty-editorial .sf-card__title { font-weight: 400; }
.sf-theme--beauty-editorial .sf-editorial__inner { padding: 34px 26px; }
.sf-theme--beauty-editorial .sf-hero__eyebrow { letter-spacing: .3em; }

/* house-04 Tech & Mobile — cool, dark, monospaced accents */
.sf-theme--tech-noir .sf-card { border-color: rgba(34, 211, 238, .28); }
.sf-theme--tech-noir .sf-card:hover { border-color: var(--sf-accent); }
.sf-theme--tech-noir .sf-top__cat,
.sf-theme--tech-noir .sf-card__price,
.sf-theme--tech-noir .sf-page-meta { font-family: ui-monospace, Menlo, Consolas, monospace; }
.sf-theme--tech-noir .sf-hero__art {
  background-image: linear-gradient(rgba(34, 211, 238, .18) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(34, 211, 238, .18) 1px, transparent 1px);
  background-size: 18px 18px; border-color: rgba(34, 211, 238, .4);
}
.sf-theme--tech-noir .cy-table thead th { background: var(--sf-surface-2); color: var(--sf-muted); }
.sf-theme--tech-noir .sf-trust { border-color: rgba(34, 211, 238, .25); }

/* house-05 Kitchen & Dining — fresh, appetising */
.sf-theme--kitchen-fresh .sf-hero__art {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .45) 0 10px, transparent 10px 22px);
}
.sf-theme--kitchen-fresh .sf-promo { border-left-width: 6px; }
.sf-theme--kitchen-fresh .sf-section__title::before { content: "🍳 "; }
.sf-theme--kitchen-fresh .sf-editorial__inner { border-left: 6px solid var(--sf-accent); }

/* house-06 Fashion & Accessories — minimal, editorial, black on white */
.sf-theme--fashion-minimal .sf-top { border-bottom: 2px solid var(--sf-text); }
.sf-theme--fashion-minimal .sf-section__title { font-size: calc(13px * var(--sf-title-scale, 1)); }
.sf-theme--fashion-minimal .sf-card__title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.sf-theme--fashion-minimal .sf-card__price { font-weight: 500; }
.sf-theme--fashion-minimal .sf-btn { border-radius: 0; }
.sf-theme--fashion-minimal .sf-btn--primary { background: var(--sf-text); border-color: var(--sf-text); color: #fff; }
.sf-theme--fashion-minimal .sf-promo { border-left: 0; border-top: 2px solid var(--sf-text); }
.sf-theme--fashion-minimal .sf-hero__eyebrow { letter-spacing: .34em; }

/* house-07 Fitness & Wellness — energetic, bold, lime */
.sf-theme--fitness-energetic .sf-hero__title { font-style: italic; }
.sf-theme--fitness-energetic .sf-card__price { font-size: 18px; }
.sf-theme--fitness-energetic .sf-section__title::after { content: " ↗"; color: var(--sf-accent-dark); }
.sf-theme--fitness-energetic .sf-promo__tag { text-transform: uppercase; }
.sf-theme--fitness-energetic .sf-top__cart { box-shadow: 0 0 0 3px rgba(101, 163, 13, .25); }

/* house-08 Auto Accessories — rugged, graphite, hazard stripes */
.sf-theme--auto-rugged .sf-hero__art {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .35) 0 8px, transparent 8px 18px);
}
.sf-theme--auto-rugged .sf-section__head { border-bottom: 2px solid var(--sf-text); }
.sf-theme--auto-rugged .sf-card__title { text-transform: uppercase; letter-spacing: .03em; font-size: 13px; }
.sf-theme--auto-rugged .sf-promo { border-left-width: 6px; }
.sf-theme--auto-rugged .sf-trust__list { list-style: "🔧  "; }

/* house-09 Travel & Outdoor — airy, wide, sky */
.sf-theme--travel-airy .sf-hero__art {
  background-image: radial-gradient(rgba(255, 255, 255, .6) 1.5px, transparent 2px);
  background-size: 16px 16px;
}
.sf-theme--travel-airy .sf-section__head { padding-bottom: 10px; }
.sf-theme--travel-airy .sf-card__desc { font-size: 13px; }
.sf-theme--travel-airy .sf-editorial__inner { padding: 30px 24px; }

/* house-10 Gifts, Hobby & Trending — festive ribbon + gold */
.sf-theme--gifts-festive .sf-strip {
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 12px, transparent 12px 24px);
}
.sf-theme--gifts-festive .sf-section__title::after { content: " 🎁"; }
.sf-theme--gifts-festive .sf-hero__art {
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 10px, transparent 10px 20px);
}
.sf-theme--gifts-festive .sf-promo__tag { background: #fef3c7; color: #92400e; }

/* ------------------------------------------------- small screen behaviour */
@media (max-width: 480px) {
  .sf-hero--minimal .sf-hero__title { font-size: 26px; }
  .sf-theme--fashion-minimal .sf-card__head { flex-direction: column; }
  .sf-card--editorial .sf-card__actions { flex-direction: column; }
  .sf-card--editorial .sf-card__actions .sf-btn { width: 100%; }
}
