astro-component-kit 0.4.0 → 0.5.0

package/src/components/lib/sections/OverlaysShowcase.astro

@@ -8,6 +8,7 @@ interface Props {
 const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astro.props;
 ---
 
+<div class="cq-overlays-showcase-cq">
 <section class="overlays-showcase">
   <div class="container">
     <div class="showcase-header">
@@ -77,8 +78,9 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-overlays-showcase-cq { container-type: inline-size; }
   .overlays-showcase {
     padding: var(--sp-16) 0;
     position: relative;
@@ -95,8 +97,8 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     text-transform: uppercase;
     letter-spacing: 0.1em;
     color: var(--c-primary-light);
-    background: rgba(184,134,11,0.1);
-    border: 1px solid rgba(184,134,11,0.25);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent);
+    border: 1px solid color-mix(in srgb, var(--c-primary, #b8860b) 25%, transparent);
     border-radius: var(--r-full);
     margin-bottom: var(--sp-4);
   }
@@ -118,7 +120,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     padding: var(--sp-12);
     background: rgba(10, 10, 10, 0.6);
     backdrop-filter: blur(20px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl);
     margin-bottom: var(--sp-6);
     box-shadow: 0 20px 60px rgba(0,0,0,0.4);
@@ -160,9 +162,9 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     padding: var(--sp-6);
     background: rgba(30, 30, 30, 0.9);
     backdrop-filter: blur(16px);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: var(--r-lg);
-    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
+    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgb(var(--ink-rgb, 255 255 255) / 0.05);
     transform: scale(1) translateY(0);
   }
   .overlay-card__header {
@@ -191,7 +193,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     transition: all 0.2s ease;
   }
   .overlay-close:hover {
-    background: rgba(255,255,255,0.1);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
     color: var(--c-text-1);
   }
   .overlay-card__body {
@@ -226,7 +228,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     width: 200px;
     background: rgba(25, 25, 25, 0.95);
     backdrop-filter: blur(18px);
-    border: 1px solid rgba(255,255,255,0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-lg);
     box-shadow: -12px 0 40px rgba(0,0,0,0.4);
     transform: translateX(0);
@@ -278,15 +280,15 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--c-text-2);
-    background: rgba(255,255,255,0.04);
-    border: 1px solid rgba(255,255,255,0.1);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.04);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: var(--r-md);
     cursor: pointer;
     transition: all 0.2s ease;
   }
   .popover-target:hover {
     color: var(--c-text-1);
-    border-color: rgba(184,134,11,0.3);
+    border-color: color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
   }
   .popover-content {
     position: absolute;
@@ -297,7 +299,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     padding: var(--sp-3) var(--sp-4);
     background: rgba(40, 40, 40, 0.95);
     backdrop-filter: blur(14px);
-    border: 1px solid rgba(255,255,255,0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: var(--r-md);
     box-shadow: 0 12px 32px rgba(0,0,0,0.4);
   }
@@ -309,8 +311,8 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     width: 10px;
     height: 10px;
     background: rgba(40, 40, 40, 0.95);
-    border-right: 1px solid rgba(255,255,255,0.1);
-    border-bottom: 1px solid rgba(255,255,255,0.1);
+    border-right: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     transform: translateX(-50%) rotate(45deg);
   }
   .popover-text {
@@ -334,12 +336,12 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
   }
   .btn--primary {
     background: linear-gradient(135deg, var(--c-primary-light), var(--c-primary));
-    color: #0a0a0a;
-    box-shadow: 0 4px 20px rgba(184,134,11,0.3);
+    color: var(--c-on-primary, #0a0a0a);
+    box-shadow: 0 4px 20px color-mix(in srgb, var(--c-primary, #b8860b) 30%, transparent);
   }
   .btn--primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 30px rgba(184,134,11,0.4);
+    box-shadow: 0 8px 30px color-mix(in srgb, var(--c-primary, #b8860b) 40%, transparent);
   }
   .btn--ghost {
     background: transparent;
@@ -354,7 +356,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
   .usage-code {
     text-align: center;
     padding: var(--sp-4);
-    background: rgba(255,255,255,0.02);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
     border-radius: var(--r-md);
   }
   .usage-code code {
@@ -363,7 +365,7 @@ const { title = "Overlays", subtitle = "Modals, drawers, and popovers." } = Astr
     color: var(--c-primary-light);
   }
 
-  @media (max-width: 640px) {
+  @container (max-width: 640px) {
     .preview-stage { padding: var(--sp-8) var(--sp-4); }
     .overlay-card { width: 240px; padding: var(--sp-4); }
     .drawer-panel { width: 160px; right: var(--sp-2); }

package/src/components/lib/sections/PricingComparisonMatrix.astro

@@ -21,6 +21,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-pricing-comparison-matrix-cq">
 <section class={`pricing-section ${className}`} aria-labelledby="pricing-title">
   <div class="pricing-bg" aria-hidden="true">
     <div class="pricing-glow"></div>
@@ -129,7 +130,7 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <script>
   const toggleBtn = document.getElementById('billingToggleBtn');
   const priceVals = document.querySelectorAll('.price-val');
@@ -149,6 +150,7 @@ const {
 </script>
 
 <style>
+  .cq-pricing-comparison-matrix-cq { container-type: inline-size; }
   .pricing-section {
     position: relative;
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
@@ -170,7 +172,7 @@ const {
     transform: translateX(-50%);
     width: 600px;
     height: 500px;
-    background: radial-gradient(circle, rgba(184, 134, 11, 0.12), transparent 70%);
+    background: radial-gradient(circle, color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent), transparent 70%);
     filter: blur(100px);
   }
 
@@ -195,7 +197,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.12);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.25);
     margin-bottom: var(--sp-4, 1rem);
@@ -224,7 +226,7 @@ const {
     gap: 0.75rem;
     padding: 0.4rem 0.8rem;
     background: rgba(15, 23, 42, 0.8);
-    border: 1px solid rgba(255, 255, 255, 0.1);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.1);
     border-radius: 9999px;
   }
 
@@ -248,7 +250,7 @@ const {
     width: 44px;
     height: 24px;
     border-radius: 9999px;
-    background: rgba(255, 255, 255, 0.15);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.15);
     border: none;
     position: relative;
     cursor: pointer;
@@ -286,7 +288,7 @@ const {
     background: rgba(15, 23, 42, 0.6);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: var(--r-xl, 20px);
     padding: 2.25rem 2rem;
     display: flex;
@@ -297,7 +299,7 @@ const {
 
   .plan-card:hover {
     transform: translateY(-4px);
-    border-color: rgba(255, 255, 255, 0.18);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.18);
   }
 
   .plan-card--popular {
@@ -393,19 +395,19 @@ const {
   }
 
   .plan-btn--ghost {
-    background: rgba(255, 255, 255, 0.05);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
     color: #fff;
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
   }
 
   .plan-btn--ghost:hover {
-    background: rgba(255, 255, 255, 0.1);
-    border-color: rgba(255, 255, 255, 0.25);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.1);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.25);
   }
 
   .plan-divider {
     height: 1px;
-    background: rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
     margin: 1.5rem 0;
   }
 
@@ -454,7 +456,7 @@ const {
     color: #10b981;
   }
 
-  @media (max-width: 960px) {
+  @container (max-width: 960px) {
     .pricing-cards {
       grid-template-columns: 1fr;
     }

package/src/components/lib/sections/PricingSinglePlan.astro

@@ -58,6 +58,7 @@ const {
 const id = `psp-${Math.random().toString(36).slice(2, 8)}`;
 ---
 
+<div class="cq-pricing-single-plan-cq">
 <section class={`psp psp--${variant} psp--${size} ${className}`} aria-labelledby={id}>
   <div class="psp__inner">
     <header class="psp__head">
@@ -89,8 +90,9 @@ const id = `psp-${Math.random().toString(36).slice(2, 8)}`;
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-pricing-single-plan-cq { container-type: inline-size; }
   .psp {
     --psp-py: 5.5rem;
     padding: var(--psp-py) var(--sp-6, 1.5rem);
@@ -108,19 +110,19 @@ const id = `psp-${Math.random().toString(36).slice(2, 8)}`;
     grid-template-columns: 1fr 1.3fr;
     border-radius: var(--r-xl, 28px);
     overflow: hidden;
-    border: 1px solid var(--c-border, rgba(255, 255, 255, 0.08));
-    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.08));
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.02);
   }
-  .psp--glow .psp__card { border-color: rgba(212, 160, 23, 0.35); box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.08), 0 40px 100px -40px rgba(212, 160, 23, 0.4); }
-  .psp--glass .psp__card { backdrop-filter: blur(16px); background: linear-gradient(160deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)); }
+  .psp--glow .psp__card { border-color: color-mix(in srgb, var(--c-primary-light, #d4a017) 35%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-primary-light, #d4a017) 8%, transparent), 0 40px 100px -40px color-mix(in srgb, var(--c-primary-light, #d4a017) 40%, transparent); }
+  .psp--glass .psp__card { backdrop-filter: blur(16px); background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.06), rgb(var(--ink-rgb, 255 255 255) / 0.015)); }
   .psp--minimal .psp__card { background: transparent; }
   .psp__price-col {
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: clamp(2rem, 5vw, 3rem);
-    background: radial-gradient(circle at 30% 0%, var(--c-primary-glow, rgba(184, 134, 11, 0.18)), transparent 70%), rgba(255, 255, 255, 0.02);
-    border-right: 1px solid rgba(255, 255, 255, 0.06);
+    background: radial-gradient(circle at 30% 0%, var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 18%, transparent)), transparent 70%), rgb(var(--ink-rgb, 255 255 255) / 0.02);
+    border-right: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06);
   }
   .psp__plan { margin: 0 0 1rem; font-size: 0.875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-primary-light, #d4a017); }
   .psp__price { display: flex; align-items: baseline; gap: 0.75rem; margin: 0; }
@@ -134,12 +136,12 @@ const id = `psp-${Math.random().toString(36).slice(2, 8)}`;
     min-height: 52px;
     border-radius: var(--r-md, 12px);
     background: var(--c-primary-light, #d4a017);
-    color: #0a0a0a;
+    color: var(--c-on-primary, #0a0a0a);
     font-weight: 700;
     text-decoration: none;
     transition: background 0.2s ease, transform 0.2s ease;
   }
-  .psp__cta:hover { background: var(--c-accent, #fef3c7); color: #0a0a0a; transform: translateY(-1px); }
+  .psp__cta:hover { background: var(--c-accent, #fef3c7); color: var(--c-on-primary, #0a0a0a); transform: translateY(-1px); }
   .psp__cta:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
   .psp__guarantee { display: flex; align-items: flex-start; gap: 0.5rem; margin: 1.25rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--c-text-2, #a3a3a3); }
   .psp__guarantee svg { color: var(--chart-pos, #34c38f); flex-shrink: 0; margin-top: 1px; }
@@ -149,9 +151,9 @@ const id = `psp-${Math.random().toString(36).slice(2, 8)}`;
   .psp__features li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9375rem; line-height: 1.4; color: var(--c-text-1, #fff); }
   .psp__features svg { color: var(--c-primary-light, #d4a017); flex-shrink: 0; }
   .psp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
-  @media (max-width: 760px) {
+  @container (max-width: 760px) {
     .psp__card { grid-template-columns: 1fr; }
-    .psp__price-col { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
+    .psp__price-col { border-right: 0; border-bottom: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06); }
     .psp__features { grid-template-columns: 1fr; }
   }
 </style>

package/src/components/lib/sections/PricingTierCards.astro

@@ -21,6 +21,7 @@ const {
 } = Astro.props;
 ---
 
+<div class="cq-pricing-tier-cards-cq">
 <section class={`tier-pricing-section ${className}`} aria-labelledby="tier-pricing-title">
   <div class="container">
     <div class="section-header">
@@ -79,8 +80,9 @@ const {
     </div>
   </div>
 </section>
-
+</div>
 <style>
+  .cq-pricing-tier-cards-cq { container-type: inline-size; }
   .tier-pricing-section {
     padding: var(--sp-20, 5rem) var(--sp-6, 1.5rem);
     background: var(--c-bg-primary, #030712);
@@ -105,7 +107,7 @@ const {
     font-weight: 700;
     letter-spacing: 0.06em;
     text-transform: uppercase;
-    background: rgba(184, 134, 11, 0.12);
+    background: color-mix(in srgb, var(--c-primary, #b8860b) 12%, transparent);
     color: #eab308;
     border: 1px solid rgba(234, 179, 8, 0.25);
     margin-bottom: var(--sp-4, 1rem);
@@ -136,7 +138,7 @@ const {
 
   .tier-card {
     background: rgba(15, 23, 42, 0.55);
-    border: 1px solid rgba(255, 255, 255, 0.08);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.08);
     border-radius: 20px;
     padding: 2.5rem 2rem;
     display: flex;
@@ -146,7 +148,7 @@ const {
 
   .tier-card:hover {
     transform: translateY(-4px);
-    border-color: rgba(255, 255, 255, 0.2);
+    border-color: rgb(var(--ink-rgb, 255 255 255) / 0.2);
   }
 
   .tier-card--highlight {
@@ -163,7 +165,7 @@ const {
     font-size: 0.72rem;
     font-weight: 700;
     text-transform: uppercase;
-    background: rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
     color: #cbd5e1;
     margin-bottom: 1rem;
   }
@@ -225,13 +227,13 @@ const {
   }
 
   .tier-btn--ghost {
-    background: rgba(255, 255, 255, 0.05);
-    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.05);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12);
     color: #fff;
   }
 
   .tier-btn--ghost:hover {
-    background: rgba(255, 255, 255, 0.12);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.12);
   }
 
   .tier-list {
@@ -248,7 +250,7 @@ const {
     color: #cbd5e1;
   }
 
-  @media (max-width: 960px) {
+  @container (max-width: 960px) {
     .tier-grid {
       grid-template-columns: 1fr;
     }

package/src/components/lib/sections/PricingToggleCards.astro

@@ -99,7 +99,7 @@ const id = `ptc-${Math.random().toString(36).slice(2, 8)}`;
   .ptc {
     --ptc-py: 5.5rem;
     padding: var(--ptc-py) var(--sp-6, 1.5rem);
-    background: radial-gradient(ellipse 60% 40% at 50% 0%, var(--c-primary-glow, rgba(184, 134, 11, 0.1)), transparent 70%), var(--c-bg, #050505);
+    background: radial-gradient(ellipse 60% 40% at 50% 0%, var(--c-primary-glow, color-mix(in srgb, var(--c-primary, #b8860b) 10%, transparent)), transparent 70%), var(--c-bg, #050505);
   }
   .ptc--sm { --ptc-py: 3.5rem; }
   .ptc--lg { --ptc-py: 7.5rem; }
@@ -112,9 +112,9 @@ const id = `ptc-${Math.random().toString(36).slice(2, 8)}`;
     position: relative;
     width: 52px;
     height: 30px;
-    border: 1px solid rgba(255, 255, 255, 0.15);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.15);
     border-radius: 999px;
-    background: rgba(255, 255, 255, 0.08);
+    background: rgb(var(--ink-rgb, 255 255 255) / 0.08);
     cursor: pointer;
     transition: background 0.25s ease;
   }
@@ -135,11 +135,11 @@ const id = `ptc-${Math.random().toString(36).slice(2, 8)}`;
     padding: 2rem;
     border-radius: var(--r-xl, 24px);
   }
-  .ptc--glass .ptc__card { background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid var(--c-border, rgba(255, 255, 255, 0.07)); backdrop-filter: blur(12px); }
-  .ptc--solid .ptc__card { background: var(--c-bg-2, #111); border: 1px solid rgba(255, 255, 255, 0.06); }
-  .ptc--outline .ptc__card { border: 1px solid rgba(255, 255, 255, 0.12); }
-  .ptc__card--featured { border-color: rgba(212, 160, 23, 0.55) !important; box-shadow: 0 30px 80px -30px rgba(212, 160, 23, 0.35); }
-  .ptc__ribbon { position: absolute; top: -12px; left: 2rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--c-primary-light, #d4a017); color: #0a0a0a; font-size: 0.75rem; font-weight: 700; }
+  .ptc--glass .ptc__card { background: linear-gradient(160deg, rgb(var(--ink-rgb, 255 255 255) / 0.05), rgb(var(--ink-rgb, 255 255 255) / 0.015)); border: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.07)); backdrop-filter: blur(12px); }
+  .ptc--solid .ptc__card { background: var(--c-bg-2, #111); border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.06); }
+  .ptc--outline .ptc__card { border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.12); }
+  .ptc__card--featured { border-color: color-mix(in srgb, var(--c-primary-light, #d4a017) 55%, transparent) !important; box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--c-primary-light, #d4a017) 35%, transparent); }
+  .ptc__ribbon { position: absolute; top: -12px; left: 2rem; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #0a0a0a); font-size: 0.75rem; font-weight: 700; }
   .ptc__name { margin: 0 0 0.35rem; font-size: 1.125rem; font-weight: 650; color: var(--c-text-1, #fff); }
   .ptc__desc { margin: 0 0 1.5rem; font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); }
   .ptc__price { display: flex; align-items: baseline; gap: 0.4rem; margin: 0 0 1.5rem; }
@@ -153,17 +153,17 @@ const id = `ptc-${Math.random().toString(36).slice(2, 8)}`;
     justify-content: center;
     min-height: 48px;
     border-radius: var(--r-md, 12px);
-    border: 1px solid rgba(255, 255, 255, 0.14);
+    border: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.14);
     color: var(--c-text-1, #fff);
     font-weight: 650;
     text-decoration: none;
     transition: background 0.2s ease, border-color 0.2s ease;
   }
-  .ptc__cta:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--c-text-1, #fff); }
-  .ptc__card--featured .ptc__cta { background: var(--c-primary-light, #d4a017); color: #0a0a0a; border-color: transparent; }
-  .ptc__card--featured .ptc__cta:hover { background: var(--c-accent, #fef3c7); color: #0a0a0a; }
+  .ptc__cta:hover { border-color: rgb(var(--ink-rgb, 255 255 255) / 0.3); color: var(--c-text-1, #fff); }
+  .ptc__card--featured .ptc__cta { background: var(--c-primary-light, #d4a017); color: var(--c-on-primary, #0a0a0a); border-color: transparent; }
+  .ptc__card--featured .ptc__cta:hover { background: var(--c-accent, #fef3c7); color: var(--c-on-primary, #0a0a0a); }
   .ptc__cta:focus-visible { outline: 2px solid var(--c-primary-light, #d4a017); outline-offset: 3px; }
-  .ptc__features { list-style: none; margin: 1.75rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgba(255, 255, 255, 0.07); display: grid; gap: 0.7rem; }
+  .ptc__features { list-style: none; margin: 1.75rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid rgb(var(--ink-rgb, 255 255 255) / 0.07); display: grid; gap: 0.7rem; }
   .ptc__features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--c-text-1, #fff); }
   .ptc__features svg { color: var(--c-primary-light, #d4a017); flex-shrink: 0; }
   .ptc__live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

package/src/components/lib/sections/ShopCategoryHero.astro

@@ -0,0 +1,103 @@
+---
+/**
+ * ShopCategoryHero — Catalogue page header: breadcrumb, oversized category title with item
+ * count, intro text, sub-category links and a strip of three visuals.
+ *
+ * @param {Array<{label: string, href?: string}>} breadcrumb - Trail; the last item is the current page.
+ * @param {string} title - Category name. Default 'Clothing'.
+ * @param {number} count - Number of products (superscript). Optional.
+ * @param {string} text - Intro paragraph.
+ * @param {Array<{label: string, href: string, active?: boolean}>} links - Sub-category links.
+ * @param {Array<{icon?: string, hue?: number, image?: string}>} visuals - Up to three images (empty hides the strip).
+ * @param {string} variant - Layout (split|centered). Default 'split'.
+ * @param {string} size - Vertical rhythm (sm|md|lg). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: breadcrumb nav with aria-current; one h1; visuals are decorative.
+ */
+import ProductMedia from '../ecommerce/ProductMedia.astro';
+
+interface Props {
+  breadcrumb?: Array<{ label: string; href?: string }>;
+  title?: string;
+  count?: number;
+  text?: string;
+  links?: Array<{ label: string; href: string; active?: boolean }>;
+  visuals?: Array<{ icon?: string; hue?: number; image?: string }>;
+  variant?: 'split' | 'centered';
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+const {
+  breadcrumb = [{ label: 'Home', href: '#' }, { label: 'Shop', href: '#' }, { label: 'Clothing' }],
+  title = 'Clothing',
+  count = 24,
+  text = 'Overshirts, knitwear and outerwear cut from linen, merino and organic cotton. Designed to be layered, washed and worn for a decade.',
+  links = [
+    { label: 'All', href: '#', active: true },
+    { label: 'Overshirts', href: '#' },
+    { label: 'Knitwear', href: '#' },
+    { label: 'Outerwear', href: '#' },
+  ],
+  visuals = [{ icon: 'shirt', hue: 30 }, { icon: 'jacket', hue: 22 }, { icon: 'sneaker', hue: 12 }],
+  variant = 'split',
+  size = 'md',
+  className = '',
+} = Astro.props;
+---
+
+<header class:list={['sch', `sch--${variant}`, `sch--${size}`, className]}>
+  <nav class="sch__crumbs" aria-label="Breadcrumb">
+    <ol>
+      {breadcrumb.map((b, i) => (
+        <li>{b.href && i < breadcrumb.length - 1 ? <a href={b.href}>{b.label}</a> : <span aria-current="page">{b.label}</span>}</li>
+      ))}
+    </ol>
+  </nav>
+  <div class="sch__main">
+    <h1 class="sch__title">{title}{count !== undefined && <sup>{count}</sup>}</h1>
+    <div class="sch__side">
+      {text && <p class="sch__text">{text}</p>}
+      {links.length > 0 && (
+        <ul class="sch__links">
+          {links.map((l) => <li><a href={l.href} aria-current={l.active ? 'page' : undefined}>{l.label}</a></li>)}
+        </ul>
+      )}
+    </div>
+  </div>
+  {visuals.length > 0 && (
+    <div class="sch__strip" aria-hidden="true">
+      {visuals.slice(0, 3).map((v) => <ProductMedia image={v.image} icon={v.icon} hue={v.hue} ratio="16 / 9" variant="soft" size="md" />)}
+    </div>
+  )}
+</header>
+
+<style>
+  .sch { container-type: inline-size; --py: clamp(1.5rem, 4vw, 3rem); padding-block: var(--py); color: var(--c-text-1, #fff); }
+  .sch--sm { --py: 1rem; }
+  .sch--lg { --py: clamp(2.5rem, 6vw, 5rem); }
+  .sch__crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--sp-6, 1.5rem); padding: 0; list-style: none; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-2, #a3a3a3); }
+  .sch__crumbs li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }
+  .sch__crumbs a { color: inherit; text-decoration: none; }
+  .sch__crumbs a:hover { color: var(--c-text-1, #fff); }
+  .sch__crumbs [aria-current] { color: var(--c-text-1, #fff); }
+  .sch__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr); gap: clamp(1rem, 4vw, 4rem); align-items: end; }
+  .sch--centered .sch__main { grid-template-columns: 1fr; text-align: center; justify-items: center; }
+  .sch__title { margin: 0; font-family: var(--font-display, Georgia, 'Times New Roman', serif); font-size: clamp(3.5rem, 12vw, 10rem); font-weight: 400; letter-spacing: -0.055em; line-height: 0.85; }
+  .sch__title sup { margin-left: 0.15em; font-family: var(--font-sans, system-ui); font-size: 0.14em; font-weight: 600; letter-spacing: 0; vertical-align: super; color: var(--shop-accent, var(--c-primary-light, #d4a017)); }
+  .sch__text { margin: 0 0 var(--sp-4, 1rem); max-width: 30rem; line-height: 1.65; color: var(--c-text-2, #a3a3a3); }
+  .sch__links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5, 1.25rem); margin: 0; padding: 0; list-style: none; }
+  .sch--centered .sch__links { justify-content: center; }
+  .sch__links a { display: inline-flex; align-items: center; min-height: 40px; font-size: 0.9rem; color: var(--c-text-2, #a3a3a3); text-decoration: none; border-bottom: 1px solid transparent; }
+  .sch__links a:hover, .sch__links a[aria-current] { color: var(--c-text-1, #fff); border-bottom-color: currentColor; }
+  .sch a:focus-visible { outline: 2px solid var(--shop-accent, var(--c-primary-light, #d4a017)); outline-offset: 3px; }
+  .sch__strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-3, 0.75rem); margin-top: clamp(1.5rem, 4vw, 3rem); }
+  .sch__strip :global(.p-media) { height: 100%; border-radius: var(--r-sm, 2px); }
+
+  @container (max-width: 760px) {
+    .sch__main { grid-template-columns: 1fr; }
+    .sch__strip { grid-template-columns: 1fr 1fr; }
+    .sch__strip > :global(:first-child) { grid-column: 1 / -1; }
+  }
+</style>