/* The storefront's shared pieces on every public page (rewrite-public-pages
   task 4.2): the course card, the bundle card, the rating stars and the cart
   notice. The cards and the stars carry the class lists of Laravel's
   components/landing/{course,bundle}-card and components/rating-stars, so a
   custom page's author CSS selects them as it selects Laravel's; their
   utilities follow as Laravel's compiled app.css holds them, generated by
   backend/scripts/page-utilities.py from the three templates (with the stars'
   sizes text-sm, text-base and text-lg). A page whose own stylesheet uses
   Tailwind too repeats them in its own, last (classic.css, course.css). The
   cards' accent is `--color-primary`, which each template sets to the
   academy's colour, else its own (intended difference 4). */
/* Theme */
@layer theme{:root,:host{--color-amber-400:oklch(82.8% .189 84.429);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-neutral-100:oklch(97% 0 0);--color-neutral-200:oklch(92.2% 0 0);--color-neutral-300:oklch(87% 0 0);--color-neutral-400:oklch(70.8% 0 0);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-tight:1.25;--radius-lg:.5rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--color-primary:#2f3788}}
/* Utilities */
@layer utilities{
.absolute{position:absolute}
.relative{position:relative}
.inset-0{inset:calc(var(--spacing) * 0)}
.inset-y-0{inset-block:calc(var(--spacing) * 0)}
.start-2{inset-inline-start:calc(var(--spacing) * 2)}
.end-2{inset-inline-end:calc(var(--spacing) * 2)}
.top-2{top:calc(var(--spacing) * 2)}
.left-0{left:calc(var(--spacing) * 0)}
.mt-0\.5{margin-top:calc(var(--spacing) * .5)}
.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}
.mt-3{margin-top:calc(var(--spacing) * 3)}
.mb-1{margin-bottom:calc(var(--spacing) * 1)}
.block{display:block}
.flex{display:flex}
.grid{display:grid}
.inline-block{display:inline-block}
.inline-flex{display:inline-flex}
.aspect-video{aspect-ratio:var(--aspect-video)}
.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}
.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}
.h-4{height:calc(var(--spacing) * 4)}
.h-full{height:100%}
.w-auto{width:auto}
.w-fit{width:fit-content}
.w-full{width:100%}
.flex-1{flex:1}
.shrink-0{flex-shrink:0}
.cursor-pointer{cursor:pointer}
.grid-cols-\[0px\]{grid-template-columns:0}
.flex-col{flex-direction:column}
.flex-row{flex-direction:row}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.gap-0{gap:calc(var(--spacing) * 0)}
.gap-1{gap:calc(var(--spacing) * 1)}
.gap-1\.5{gap:calc(var(--spacing) * 1.5)}
.gap-2{gap:calc(var(--spacing) * 2)}
.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.overflow-hidden{overflow:hidden}
.rounded-full{border-radius:3.40282e38px}
.rounded-lg{border-radius:var(--radius-lg)}
.border{border-style:var(--tw-border-style);border-width:1px}
.border-2{border-style:var(--tw-border-style);border-width:2px}
.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}
.border-neutral-200{border-color:var(--color-neutral-200)}
.border-primary\/30{border-color:#2f37884d}
@supports (color:color-mix(in lab,red,red)){
  .border-primary\/30{border-color:color-mix(in oklab,var(--color-primary) 30%,transparent)}
}
.border-primary\/40{border-color:#2f378866}
@supports (color:color-mix(in lab,red,red)){
  .border-primary\/40{border-color:color-mix(in oklab,var(--color-primary) 40%,transparent)}
}
.bg-emerald-500{background-color:var(--color-emerald-500)}
.bg-neutral-100{background-color:var(--color-neutral-100)}
.bg-primary{background-color:var(--color-primary)}
.bg-white{background-color:var(--color-white)}
.object-contain{object-fit:contain}
.object-cover{object-fit:cover}
.object-center{object-position:center}
.p-4{padding:calc(var(--spacing) * 4)}
.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}
.px-4{padding-inline:calc(var(--spacing) * 4)}
.py-1{padding-block:calc(var(--spacing) * 1)}
.py-2{padding-block:calc(var(--spacing) * 2)}
.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}
.ps-5{padding-inline-start:calc(var(--spacing) * 5)}
.text-center{text-align:center}
.text-start{text-align:start}
.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}
.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}
.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}
.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}
.text-\[10px\]{font-size:10px}
.leading-none{--tw-leading:1;line-height:1}
.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}
.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}
.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}
.whitespace-nowrap{white-space:nowrap}
.text-amber-400{color:var(--color-amber-400)}
.text-black{color:var(--color-black)}
.text-emerald-600{color:var(--color-emerald-600)}
.text-inherit{color:inherit}
.text-neutral-300{color:var(--color-neutral-300)}
.text-neutral-400{color:var(--color-neutral-400)}
.text-neutral-500{color:var(--color-neutral-500)}
.text-neutral-700{color:var(--color-neutral-700)}
.text-primary{color:var(--color-primary)}
.text-white{color:var(--color-white)}
.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}
.line-through{text-decoration-line:line-through}
.no-underline{text-decoration-line:none}
.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}
.transition-\[grid-template-columns\]{transition-property:grid-template-columns;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}
.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}
.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}
.duration-300{--tw-duration:.3s;transition-duration:.3s}
.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}
@media (hover:hover){
  .group-hover\:grid-cols-\[16px\]:is(:where(.group):hover *){grid-template-columns:16px}
  .group-hover\:gap-2:is(:where(.group):hover *){gap:calc(var(--spacing) * 2)}
}
@media (hover:hover){
  .hover\:bg-primary\/5:hover{background-color:#2f37880d}
  @supports (color:color-mix(in lab,red,red)){
    .hover\:bg-primary\/5:hover{background-color:color-mix(in oklab,var(--color-primary) 5%,transparent)}
  }
}
}
/* Registered properties */
@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}
@property --tw-leading{syntax:"*";inherits:false}
@property --tw-font-weight{syntax:"*";inherits:false}
@property --tw-ordinal{syntax:"*";inherits:false}
@property --tw-slashed-zero{syntax:"*";inherits:false}
@property --tw-numeric-figure{syntax:"*";inherits:false}
@property --tw-numeric-spacing{syntax:"*";inherits:false}
@property --tw-numeric-fraction{syntax:"*";inherits:false}
@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-shadow-color{syntax:"*";inherits:false}
@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}
@property --tw-duration{syntax:"*";inherits:false}
@property --tw-ease{syntax:"*";inherits:false}
/* For browsers without @property, as Tailwind writes it. */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-inset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}

/* The gold row of the stars, cut to the score: a class per fifth of a star,
   where Laravel's view wrote an inline width (intended difference 5). */
.sf-fill-0 { width: 0%; }
.sf-fill-1 { width: 4%; }
.sf-fill-2 { width: 8%; }
.sf-fill-3 { width: 12%; }
.sf-fill-4 { width: 16%; }
.sf-fill-5 { width: 20%; }
.sf-fill-6 { width: 24%; }
.sf-fill-7 { width: 28%; }
.sf-fill-8 { width: 32%; }
.sf-fill-9 { width: 36%; }
.sf-fill-10 { width: 40%; }
.sf-fill-11 { width: 44%; }
.sf-fill-12 { width: 48%; }
.sf-fill-13 { width: 52%; }
.sf-fill-14 { width: 56%; }
.sf-fill-15 { width: 60%; }
.sf-fill-16 { width: 64%; }
.sf-fill-17 { width: 68%; }
.sf-fill-18 { width: 72%; }
.sf-fill-19 { width: 76%; }
.sf-fill-20 { width: 80%; }
.sf-fill-21 { width: 84%; }
.sf-fill-22 { width: 88%; }
.sf-fill-23 { width: 92%; }
.sf-fill-24 { width: 96%; }
.sf-fill-25 { width: 100%; }

/* The cart's notice after an add door sent the buyer back. */
.sf-notice { width: 100%; border-bottom: 1px solid; }
.sf-notice--success { border-color: oklch(84.5% .143 164.978); background-color: oklch(97.9% .021 166.113); color: oklch(37.8% .077 168.94); }
.sf-notice--warning { border-color: oklch(87.9% .169 91.605); background-color: oklch(98.7% .022 95.277); color: oklch(41.4% .112 45.904); }
.sf-notice--info { border-color: oklch(87% 0 0); background-color: #fff; color: oklch(26.9% 0 0); }
.sf-notice-in {
  max-width: 72rem;
  margin-inline: auto;
  padding: .75rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-size: .875rem;
  line-height: calc(1.25 / .875);
}
.sf-notice-text { min-width: 0; }
.sf-notice-text > :not(:last-child) { margin-block-end: .125rem; }
.sf-notice-title { font-weight: 600; }
.sf-notice-hint { font-size: .75rem; line-height: calc(1 / .75); opacity: .8; }
.sf-notice-coupon { font-size: .75rem; line-height: calc(1 / .75); }
.sf-notice-link {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  border-radius: .5rem;
  background-color: #fff;
  padding: .5rem 1rem;
  font-weight: 600;
  border: 1px solid currentColor;
  text-decoration-line: none;
  color: inherit;
}
@media (hover: hover) {
  .sf-notice-link:hover { opacity: .9; }
}