@font-face{font-family:Playfair;src:url(/_f/playfair-roman.woff2) format("woff2");font-display:swap}
@font-face{font-family:Playfair;font-style:italic;src:url(/_f/playfair-italic.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Rubric Fallback";src:local("Times New Roman"),local("Liberation Serif"),local("Georgia");size-adjust:105%;ascent-override:84%;descent-override:30%;line-gap-override:0%}

:root{
  --accent:#17624a;
  --paper:oklch(98% .005 235);
  --wash:oklch(94.6% .008 235);
  --ink:oklch(20% .012 255);
  --ink-2:oklch(44% .014 255);
  --hair:color-mix(in oklch,var(--ink) 30%,var(--paper));
  --mark:color-mix(in oklch,var(--ink) 22%,var(--wash));
  --rubric:oklch(from var(--accent) clamp(.38,l,.5) c h);
  --m:clamp(1rem,4.2vw,4.5rem);
  --g:clamp(.75rem,1.7vw,1.5rem);
  --serif:Playfair,"Rubric Fallback",Georgia,serif;
  color-scheme:light;
  accent-color:var(--accent);
  caret-color:var(--rubric);
  scrollbar-color:var(--ink) var(--paper);
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);font-synthesis:none}
body{
  font:400 clamp(1.0625rem,.98rem + .25vw,1.1875rem)/1.5 var(--serif);
  color:var(--ink);background:var(--paper);
  font-kerning:normal;font-variant-numeric:oldstyle-nums proportional-nums;
  hanging-punctuation:first allow-end;
  display:flex;flex-direction:column;min-height:100dvh;
}
main{flex:1;padding-inline:var(--m)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
ul,ol{list-style:none}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
h1,h2,h3,th,b,strong{font-weight:400}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
h1,h2,a,p{overflow-wrap:break-word}

strong,b{font-style:normal;color:var(--rubric)}
:is(.prose blockquote,.prose h3,.intro-tagline,.empty,.missing p) em{font-style:normal}
::selection{background:color-mix(in oklab,var(--accent) 28%,var(--paper));color:var(--ink)}
:focus-visible{outline:2px solid var(--rubric);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--m);top:0;z-index:9;padding:.6em 1em;background:var(--ink);color:var(--paper);translate:0 -110%}
.skip:focus{translate:0}


.buy-qty-label,.ship-to label,.badge,.results-count,.pager,.line-qty button,.line-remove button,.ship-to button,.continue,
.prose h2,.prose th,.subtotal span,.thanks-total span,.stock,.card-link::before,.line-info::before,.empty::after,.missing::after{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-variation-settings:"opsz" 6;font-variant-numeric:lining-nums;font-style:normal
}

.card-price,.product-price,.line-unit,.line-total,.thanks-items li>span:last-child,.subtotal strong,.thanks-total strong,.buy-qty,.line-qty input,.prose table{font-variant-numeric:lining-nums tabular-nums}


.masthead{
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:0 2rem;
  margin-inline:var(--m);padding-block:.9rem .5rem;border-bottom:1px solid var(--ink)
}
.brand{font-style:italic;font-size:1.5rem;text-decoration:none;line-height:1;letter-spacing:-.01em}
.nav{display:flex;flex-wrap:wrap;column-gap:1.5rem}
.nav:not(:has(a)){display:none}

.nav a,.cart-link,.colophon-nav a{padding-block:.35em;font-style:italic;font-size:1.0625rem;text-transform:lowercase}
.nav a,.cart-link,.colophon-nav a,.continue{text-decoration:none;background:linear-gradient(var(--rubric),var(--rubric)) 0 100%/0 1px no-repeat;background-origin:content-box;background-clip:content-box}
.nav a:hover,.cart-link:hover,.colophon-nav a:hover,.continue:hover{background-size:100% 1px}
.pager-next{margin-inline-end:-.14em}
.search{justify-self:end}
.search input{
  width:11rem;border:0;border-bottom:1px solid var(--hair);background:none;
  padding:.15em 0;font-style:italic;font-size:1rem;outline-offset:4px;border-radius:0;-webkit-appearance:none;appearance:none
}
.search input::placeholder{color:var(--ink-2)}
.search input:focus{border-color:var(--ink)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}



.intro{
  --tag:calc((100% - 11*var(--g))/3 + 3*var(--g));
  display:flex;flex-wrap:wrap;align-items:last baseline;gap:1.25rem var(--g);padding-block:clamp(1.25rem,2.8vw,2.75rem) clamp(2.25rem,4vw,3.5rem)
}
.intro-title{
  max-width:100%;font-size:clamp(4.5rem,14vw,13.5rem);line-height:.82;letter-spacing:-.045em;
  margin-inline-start:-.05em;overflow-wrap:break-word;hyphens:auto
}
.intro-tagline{
  flex:0 0 var(--tag);margin-inline-start:auto;
  font-style:italic;font-size:clamp(1.25rem,1rem + .55vw,1.625rem);line-height:1.25
}


.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2.5rem,6vw,6rem) var(--g)}
.card{display:list-item;grid-column:1/-1}
.card-link{
  --cw:calc((100% - 11*var(--g))/3 + 3*var(--g));
  display:grid;grid-template:repeat(5,auto) 1fr/var(--cw) minmax(0,1fr);column-gap:var(--g);text-decoration:none;text-align:end
}
.card-media{grid-area:1/2/-1;align-self:start;overflow:hidden;background:var(--wash);aspect-ratio:3/4}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-link>:not(.card-media),.card-link::before,.card-link::after{grid-column:1}
.card-link::before,.card-link::after{color:var(--rubric)}
.card-link::before{content:"Pl.";grid-row:1;font-size:.6875rem;line-height:1}
:lang(es) :is(.card-link,.line-info)::before{content:"Lám."}
:lang(es) :is(.empty,.missing)::after{content:"Lám."}
.card-link::after{content:counter(list-item,lower-roman);grid-row:2;margin-block:.15rem .55rem;font-style:italic;font-size:var(--pl,2.75rem);line-height:.8;letter-spacing:-.01em}
.card-title{grid-row:3;font-size:var(--ct,1.25rem);line-height:1.15;hyphens:auto}
.card-price{grid-row:4;padding-top:.35rem;font-style:italic;font-size:1.0625rem;line-height:1}
.badge{grid-row:5;margin-top:.5rem;display:flex;justify-content:end;align-items:center;gap:.55em}

.card:nth-child(even) .card-link{grid-template-columns:minmax(0,1fr) var(--cw);text-align:start}
.card:nth-child(even) .card-link>:not(.card-media),.card:nth-child(even) .card-link::before,.card:nth-child(even) .card-link::after{grid-column:2}
.card:nth-child(even) .card-media{grid-column:1}
.card:nth-child(even) .badge{justify-content:start}
.badge::before,.is-product:has(.buy-button:disabled) .stock::before{content:"";flex:none;width:.625rem;height:.625rem;border-radius:50%;background:var(--rubric)}
.is-sold-out .card-price{text-decoration:line-through 1px;color:var(--ink-2)}
.card-link:hover .card-title,.card-link:focus-visible .card-title{text-decoration:underline 1px var(--rubric);text-underline-offset:.22em}
.card-link:focus-visible{outline:0}
.card-link:focus-visible .card-media{outline:2px solid var(--rubric);outline-offset:5px}


.is-empty{
  --pm:clamp(.5rem,1.6vw,1.25rem);
  display:grid;place-items:center;container-type:inline-size;background:var(--wash);color:var(--rubric);font-style:italic;line-height:1;
  box-shadow:inset 0 0 0 var(--pm) var(--wash),inset 0 0 0 calc(var(--pm) + 1px) var(--mark)
}
.card-initial{font-size:66cqi;line-height:1;translate:0 -.04em}
.line-img.is-empty{--pm:.3rem;font-size:2.75rem}


@media (min-width:56rem){
  .card{grid-column:span 6}
  .card-link{--cw:calc((100% - 5*var(--g))/3 + var(--g))}
  .card:nth-child(odd) .card-media{margin-inline-end:var(--g)}
  .card:nth-child(even) .card-media{margin-inline-start:var(--g)}
  .card:nth-child(odd){position:relative}
  .card:nth-child(odd)::after{content:"";position:absolute;inset-block:0;inset-inline-end:calc(var(--g)/-2 - .5px);width:1px;background:var(--hair)}
}

@media (max-width:55.99rem){
  .card{--pl:2.25rem;--ct:1.0625rem}
}


.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;margin-top:clamp(4rem,8vw,7rem);padding-top:.8rem;border-top:1px solid var(--ink)}
.pager-status{grid-column:2;font-style:italic;text-transform:none;letter-spacing:0;font-size:1rem;font-variant-numeric:oldstyle-nums}
.pager-prev{grid-column:1;justify-self:start;text-decoration:none}
.pager-next{grid-column:3;justify-self:end;text-decoration:none}
.pager-prev::before,.pager-next::after{content:"";display:inline-block;width:1.75em;height:.75em;margin-inline-end:.6em;background:currentColor;scale:-1 1;
  mask:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 9" fill="none" stroke="red"><path d="M0 4.5h20M16 .5l4 4-4 4"/></svg>') 0/100% 100%}
.pager-next::after{margin:0 0 0 .6em;scale:none}


.page-title{font-size:clamp(3.25rem,10vw,9.5rem);line-height:.9;letter-spacing:-.035em;padding-block:clamp(2rem,5vw,4.5rem) clamp(1.5rem,3vw,3rem)}
.results-count{margin-bottom:clamp(2rem,4vw,4rem);padding-top:.7rem;border-top:1px solid var(--ink)}


.empty,.missing{--cap:24rem;display:grid;grid-template-columns:2.75rem minmax(0,1fr);align-items:baseline;container-type:inline-size}
.empty{width:min(100%,var(--cap));font-style:italic;font-size:1.25rem;line-height:1.35}
.empty::before,.missing::before{
  content:"00";grid-area:1/1/2/-1;display:grid;place-items:center;width:min(100cqi,var(--cap));aspect-ratio:3/4;margin-bottom:.9rem;padding-bottom:.08em;
  background:var(--wash);color:var(--rubric);font-style:italic;font-size:calc(min(100cqi,var(--cap))*.56);line-height:1;letter-spacing:-.04em;font-variant-numeric:lining-nums;
  box-shadow:inset 0 0 0 1.1rem var(--wash),inset 0 0 0 calc(1.1rem + 1px) var(--mark)
}
.empty::after,.missing::after{content:"Pl.";grid-area:2/1;color:var(--rubric);font-size:.6875rem}
.missing{grid-template-columns:0 2.75rem minmax(0,19rem);justify-content:start;padding-bottom:clamp(3rem,8vw,7rem)}
.missing h1{grid-area:1/1/2/-1;text-align:start}
.missing::before{content:"404";grid-area:2/2/3/-1;font-size:calc(min(100cqi,var(--cap))*.4)}
.missing::after{grid-area:3/2}
.missing p{grid-area:3/3;font-size:1.25rem;line-height:1.35;font-style:italic}
.missing .continue{grid-area:4/3}
.continue{display:inline-block;justify-self:start;margin-top:1.5rem}

.notice{max-width:32rem;margin-bottom:2.5rem;padding-inline-start:1.4em;text-indent:-1.4em;font-style:italic;font-size:1.25rem;line-height:1.35}
.notice::before{content:"\00B6";display:inline-block;width:1.4em;text-indent:0;color:var(--rubric);font-style:normal}


.product{display:grid;grid-template-columns:minmax(0,7fr) 1px minmax(0,4.2fr);column-gap:clamp(1.5rem,3.5vw,3.5rem);padding-block:clamp(1.5rem,4vw,3.5rem) clamp(3rem,8vw,7rem)}
.product::before{content:"";grid-area:1/2;background:var(--ink)}
.product-media{grid-area:1/1;counter-reset:fig}
.product-hero,.product-more li{counter-increment:fig}
.product-hero{padding:clamp(1rem,5%,4rem) clamp(1rem,8%,6rem) 0;background:var(--wash)}
.product-hero::after{padding-block:.6rem .9rem}
.product-hero img,.product-more img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--wash)}
.product-hero.is-empty{aspect-ratio:3/4;padding:0;--pm:clamp(1rem,2.8vw,2.5rem)}
.product-hero::after,.product-more li::after{content:"Fig.\2009" counter(fig);display:block;padding-top:.45rem;font-style:italic;font-size:.875rem;color:var(--ink-2)}
.product-hero.is-empty::after{display:none}
.product-more li{overflow:hidden}
.product-more{display:grid;grid-template-columns:1fr 1fr;gap:var(--g);margin-top:var(--g)}
.product-info{grid-area:1/3;position:sticky;top:2rem;align-self:start}
.product-title{font-size:clamp(3rem,5.6vw,6rem);line-height:.92;letter-spacing:-.035em;hyphens:auto}
.product-price{margin-top:1.5rem;font-style:italic;font-size:2.25rem;line-height:1}
.stock{margin-top:.9rem;color:var(--rubric);display:flex;align-items:center;gap:.55em}
.buy{display:grid;grid-template-columns:5rem 1fr;gap:.5rem var(--g);margin-block:2rem 2.5rem;padding-top:1rem;border-top:1px solid var(--ink)}
.buy-qty-label{grid-column:1/-1}
.buy-qty,.line-qty input{
  -moz-appearance:textfield;appearance:textfield;width:100%;height:3.25rem;border:1px solid var(--ink);border-radius:0;background:transparent;
  text-align:center;font-size:1.375rem
}
.buy-qty::-webkit-inner-spin-button,.line-qty input::-webkit-inner-spin-button{-webkit-appearance:none}

.buy-button,.checkout-button{
  --btn:var(--accent);--k:clamp(0,(.179 - (.2126*clamp(0,r,1) + .7152*clamp(0,g,1) + .0722*clamp(0,b,1)))*9999,1);height:3.25rem;border:0;border-radius:0;cursor:pointer;
  background:var(--btn);color:color(from var(--btn) srgb-linear var(--k) var(--k) var(--k));
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--btn),var(--ink) 55%);
  font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;font-variation-settings:"opsz" 6
}
.buy-button:hover,.checkout-button:hover{--btn:oklch(from var(--accent) calc(l - .1 + .22*clamp(0,(.3 - l)*999,1)) c h)}
.buy-button:active,.checkout-button:active{translate:0 1px}
.buy-button:disabled{--btn:var(--paper);color:var(--ink-2);cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--ink-2);
  background-image:repeating-linear-gradient(-45deg,transparent 0 6px,color-mix(in oklch,var(--ink) 18%,transparent) 6px 7px)}
.buy-button:disabled:active{translate:none}


.prose{max-width:34em;font-size:1.125rem;line-height:1.58;hyphens:auto}
.prose>*+*{margin-top:1em}
.prose h2{margin-top:2.5rem;padding-top:.7rem;border-top:1px solid var(--ink)}
.prose h3{margin-top:2em;font-style:italic;font-size:1.25rem}
.prose ul li,.prose ol li{padding-inline-start:1.5em;text-indent:-1.5em}
.prose ul li::before{content:"\2013";display:inline-block;width:1.5em;text-indent:0;color:var(--rubric)}
.prose ol{counter-reset:li}
.prose ol li{counter-increment:li}
.prose ol li::before{content:counter(li) ".";display:inline-block;width:1.5em;text-indent:0;font-style:italic;color:var(--rubric)}
.prose li+li{margin-top:.3em}
.prose a{text-decoration-color:var(--rubric)}
.prose a:hover{color:var(--rubric)}
.prose blockquote{margin-block:2.5rem;font-style:italic;font-size:1.625rem;line-height:1.25}
.prose blockquote p{text-indent:-.4em}
.prose hr{border:0;height:1px;background:var(--ink);width:4rem;margin-block:2.5em}
.prose code{font:.875em ui-monospace,Menlo,Consolas,monospace}
.prose table{border-collapse:collapse;width:100%}
.prose th,.prose td{text-align:start;padding:.4em .6em .4em 0;border-bottom:1px solid var(--hair)}
.prose th{border-color:var(--ink);vertical-align:bottom}
.prose img{margin-block:2em}
.prose>p:last-child::after{content:"";display:inline-block;width:.5em;height:.5em;margin-inline-start:.5em;background:var(--rubric)}


.page{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);padding-bottom:clamp(3rem,8vw,7rem)}
.page .page-title{grid-column:1/-1}
.page .prose{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:start;max-width:none;font-size:1.1875rem}
.page .prose>*{grid-column:5/span 6}
.page .prose>h2{grid-column:2/span 3;margin-top:3rem}
.page .prose>h2+*{margin-top:3rem;padding-top:.7rem;border-top:1px solid var(--ink)}
.page .prose>blockquote{grid-column:4/span 8;font-size:clamp(1.75rem,1rem + 2vw,2.75rem)}
.page .prose>p:first-child{font-size:1.4em;line-height:1.35}
.page .prose>p:first-child::first-letter{initial-letter:3;color:var(--rubric);margin-inline-end:.08em}


.cart{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:start;padding-bottom:clamp(3rem,8vw,7rem)}
.cart>*{grid-column:1/-1}
.lines{grid-column:1/span 8;border-top:1px solid var(--ink);counter-reset:pl}
.line{counter-increment:pl;display:grid;grid-template-columns:5rem 1fr auto auto 6rem;gap:0 1.5rem;align-items:center;padding-block:1rem;border-bottom:1px solid var(--hair)}
.line-img{width:5rem;aspect-ratio:3/4;object-fit:cover;background:var(--wash)}
.line-info{display:grid;grid-template-columns:2.9rem 1fr;column-gap:.9rem;align-items:baseline}
.line-info::before{content:"Pl.";grid-area:1/1;align-self:start;padding-top:.45rem;color:var(--rubric);font-size:.6875rem;line-height:1}
.line-info::after{content:counter(pl,lower-roman);grid-area:1/1/3;align-self:start;margin-top:1.3rem;color:var(--rubric);font-style:italic;font-size:1.5rem;white-space:nowrap;line-height:.8;letter-spacing:-.01em}
.line-title{grid-area:1/2;font-size:1.375rem;line-height:1.2;text-decoration:none}
.line-title:hover{text-decoration:underline 1px var(--rubric)}
.line-unit{grid-area:2/2;font-style:italic;color:var(--ink-2)}
.line-qty{display:flex;align-items:center;gap:.5rem}
.line-qty input{width:3.25rem;height:2.5rem;font-size:1.125rem}
.line-qty button,.line-remove button,.ship-to button{border:0;background:none;cursor:pointer;padding:.75rem 0}
.line-qty button:hover,.line-remove button:hover,.ship-to button:hover{color:var(--rubric)}
.line-total{text-align:end;font-size:1.25rem}
.summary{grid-column:10/span 3;position:sticky;top:2rem;padding-top:.7rem;border-top:1px solid var(--ink)}
.subtotal,.thanks-total{display:grid}
.subtotal strong,.thanks-total strong{color:var(--ink);font-size:clamp(3rem,5vw,4.5rem);line-height:1;letter-spacing:-.02em;margin-top:.5rem}
.price-note{margin-top:.6rem;font-size:.9375rem;font-style:italic;color:var(--ink-2)}
.ship-to{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.5rem 1rem;margin-top:1.25rem}
.ship-to label{grid-column:1/-1}
.ship-to select{min-width:0;height:3.25rem;padding:0 .75rem;border:1px solid var(--ink);border-radius:0;background:transparent;font-size:1.125rem}
.summary-note{margin-block:1rem 1.5rem;text-transform:none;letter-spacing:0;font-size:.9375rem;font-style:italic;color:var(--ink-2)}
.checkout-button{width:100%}
.cart .continue{margin-top:1.25rem}


.thanks{max-width:48rem;padding-bottom:clamp(3rem,8vw,7rem)}
.thanks .page-title{font-style:italic}
.thanks-lead{font-size:1.375rem;margin-bottom:2.5rem}
.thanks-contact{margin-top:2.5rem}
.thanks-items{border-top:1px solid var(--ink);padding-top:.6rem;counter-reset:pl}
.thanks-items li{counter-increment:pl;display:flex;align-items:baseline;padding-block:.35rem;font-size:1.1875rem}
.thanks-items li>span:first-child{display:flex;flex:1;align-items:baseline;min-width:0}
.thanks-items li>span:first-child::before{content:counter(pl,lower-roman);flex:none;width:3rem;color:var(--rubric);font-style:italic;font-size:1.5rem;line-height:1;letter-spacing:-.01em}
.thanks-items li>span:first-child::after{content:"";flex:1 0 1.5rem;margin-inline:.6em;border-bottom:1px dotted var(--ink-2);translate:0 -.3em}
.thanks-items li.is-charge{counter-increment:none}
.thanks-items li.is-charge>span:first-child::before{content:""}
.thanks-total{margin-top:1.5rem;padding-top:.7rem;border-top:1px solid var(--ink)}
.thanks-total small{margin-top:.6rem;font-size:.9375rem;font-style:italic;color:var(--ink-2)}


.colophon{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 2rem;margin:clamp(3rem,6vw,6rem) var(--m) 0;padding-block:.5rem 2rem;border-top:1px solid var(--ink)}
.colophon-nav{display:flex;flex-wrap:wrap;column-gap:1.75rem}
.colophon-nav:not(:has(a)){display:none}
.colophon-made{font-style:italic;font-size:.9375rem;color:var(--ink-2);padding-block:.5em}
.colophon-made a{text-decoration-color:color-mix(in oklch,var(--ink) 40%,transparent)}

@media (min-width:56rem){
  .results .empty,.missing{--n:2;--cap:calc((100cqi - 11*var(--g))/3 + 2*var(--g))}
  .cart .notice{grid-area:2/1/auto/span 3;margin-top:.2rem;font-size:1.125rem}
  .cart .empty{grid-area:2/5/auto/span 5}
  .cart .empty~.continue{grid-column:5/span 4;margin-inline-start:2.75rem}
  .thanks{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--g);align-items:start;max-width:none}
  .thanks>*{grid-column:1/-1}
  .thanks-lead{grid-column:1/span 7}
  .thanks-items{grid-area:3/1/5/span 8}
  .thanks-total{grid-area:3/10/auto/span 3;margin-top:0}
  .thanks .continue{grid-area:4/10/auto/span 3}
}
@media (max-width:55.99rem){
  .masthead{grid-template-columns:1fr auto;padding-top:.6rem;column-gap:1rem;border:0}
  .search input{border-color:var(--ink);padding-block:.4em}
  .cart-link{grid-area:1/2}
  .nav{grid-column:1/-1;column-gap:1.25rem}
  .search{grid-column:1/-1;justify-self:stretch;margin-top:.3rem}
  .search input{width:100%}
  .intro{--tag:calc((100% - 11*var(--g))*5/6 + 9*var(--g))}
  .intro-tagline{padding-top:.7rem;border-top:1px solid var(--ink)}
  .product{grid-template-columns:100%}
  .product::before{display:none}
  .product-media{display:contents}
  .product-info{grid-area:auto}
  .product-hero.is-empty{aspect-ratio:4/3}
  .product-more{order:1;margin-top:2.5rem}
  .lines,.summary,.page .prose>*,.page .prose>:is(h2,blockquote){grid-column:1/-1}
  .page .prose>h2+*{border:0;padding-top:0;margin-top:1rem}
  .empty,.missing{--cap:16rem}
  .product-info{position:static;margin-top:2rem}
  .summary{margin-top:2.5rem;position:static}
  .line{grid-template-columns:4rem 1fr auto;gap:.25rem 1rem;align-items:start}
  .line-img{width:4rem;grid-row:span 2}
  .line-qty{grid-column:2}
  .line-remove{grid-column:3;justify-self:end}
  .line-total{grid-column:3;grid-row:1}
}

@media (min-width:40rem) and (max-width:55.99rem){
  .masthead{grid-template-columns:auto 1fr auto auto;column-gap:1.5rem;border-bottom:1px solid var(--ink)}
  .nav,.search{grid-column:auto}
  .search{justify-self:end;margin:0}
  .search input{width:9rem;border-color:var(--hair);padding-block:.15em}
  .cart-link{grid-area:auto}
  
  .card{grid-column:1/span 9;--pl:2.75rem;--ct:1.25rem}
  .card:nth-child(even){grid-column:4/span 9}
  .card-link{--cw:calc((100% - 8*var(--g))/3 + 2*var(--g))}
  .product{grid-template-columns:minmax(0,6fr) 1px minmax(0,5fr)}
  .product::before{display:block}
  .product-media{display:block}
  .product-info{grid-area:1/3;margin-top:0;position:sticky}
  .product-title{font-size:2.75rem}
  .product-more{margin-top:var(--g)}
  .product-hero.is-empty{aspect-ratio:3/4}
  .results .empty,.missing{--n:3;--cap:calc((100cqi - 11*var(--g))/2 + 5*var(--g))}
}

@media (min-width:40rem){
  .masthead:not(:has(.nav a)){grid-template-columns:auto 1fr auto}
  .results .empty,.missing{width:auto;grid-template:repeat(4,auto) 1fr/calc((100% - 11*var(--g))*var(--n)/12 + (var(--n) - 1)*var(--g)) minmax(0,1fr);gap:0 var(--g);align-items:start;text-align:end}
  .results .empty::before,.missing::before{grid-area:1/2/-1;margin:0}
  .missing::before{grid-row-start:2}
  .results .empty::after,.missing::after{grid-area:1/1;justify-self:end}
  .missing::after{grid-row:2}
  .missing p{grid-area:3/1}
  .missing .continue{grid-area:4/1;justify-self:end}
}

@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  img[data-vt]{view-transition-name:attr(data-vt type(<custom-ident>),none)}
  ::view-transition-group(*){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  .nav a,.cart-link,.colophon-nav a,.continue{transition:background-size .35s cubic-bezier(.2,.7,.2,1)}
  .buy-button,.checkout-button{transition:background-color .2s}
  .pager-prev::before,.pager-next::after{transition:translate .3s}
  .pager-prev:hover::before{translate:-.25em}.pager-next:hover::after{translate:.25em}
  .card-media img{transition:scale 1.2s cubic-bezier(.2,.7,.2,1)}
  .card-link:hover img{scale:1.04}
  .intro-title,.page-title,.product-title{transition:opacity .9s,translate .9s cubic-bezier(.2,.7,.2,1)}
  @starting-style{.intro-title,.page-title,.product-title{opacity:0;translate:0 .08em}}
  @supports (animation-timeline:view()){
    .card-media img,.product-more img{animation:settle linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
    @keyframes settle{from{transform:scale(1.12) translateY(-3%)}}
  }
}
@media print{
  .masthead,.colophon,.buy,.line-qty,.line-remove,.checkout,.pager,.continue{display:none}
  body{font-size:11pt}
}
.brand-logo{display:block;width:auto;height:auto;max-height:2.25rem;max-width:min(16rem,50vw)}

/* The bar across a preview of an unsaved look. Only preview stylesheets
   carry it, so it stays the same over every theme. */
.sc-preview {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0;
  padding: 0.625rem 1rem;
  background: #141210;
  color: #f7f5f0;
  font: 500 0.875rem/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.sc-preview p { margin: 0; }
.sc-preview b { font-weight: 700; }
.sc-preview a { color: #f7f5f0; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }
/* On the sample store, the look it's in is plain. */
.sc-preview [aria-current] { text-decoration: none; }