/* 40 Nights — signature layer (Phase 3), loaded last on home and shop.
   The vigil hero: the flag photograph is the sacred object and nothing sits on its mark. Forty fine ticks mark the
   forty nights between the ink panel and the photograph. The collection rules below refine type and hierarchy on
   both pages that share the product grid. */
:root{--vigil-ink:#0b0b0a;--vigil-cream:#f1ecdf;--vigil-gold:#c2a46d;--vigil-muted:rgba(241,236,223,.66);--vigil-panel:44%}

/* ---- Hero composition ---------------------------------------------------------------------------------------- */
body:not(.commerce-shop) .hero.vigil{height:100svh;min-height:640px;max-height:1100px;overflow:hidden;background:radial-gradient(120% 70% at 0% 100%,rgba(194,164,109,.09),transparent 60%),var(--vigil-ink)}
.hero.vigil .vigil-frame{position:absolute;top:0;right:0;bottom:0;width:calc(100% - var(--vigil-panel));margin:0;overflow:hidden;background:#141210}
.hero.vigil .hero-image{position:absolute;inset:0;overflow:hidden}
.hero.vigil .hero-image img{width:100%;height:100%;object-fit:cover;object-position:60% 42%;filter:saturate(.92) contrast(1.04);animation:none;transform:none}
/* Only the outer edges are shaded: the left seam melts into the ink panel and the top keeps the navigation legible.
   The centre of the frame, where the flag's mark sits, is never darkened. */
.hero.vigil .hero-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--vigil-ink) 0%,rgba(11,11,10,.55) 9%,rgba(11,11,10,0) 24%),linear-gradient(180deg,rgba(11,11,10,.72) 0%,rgba(11,11,10,0) 22%),linear-gradient(0deg,rgba(11,11,10,.35) 0%,rgba(11,11,10,0) 18%)}

.hero.vigil .vigil-nights{position:absolute;z-index:2;top:150px;bottom:clamp(48px,8svh,88px);left:var(--vigil-panel);width:24px;margin-left:-12px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;pointer-events:none}
.hero.vigil .vigil-nights i{display:block;width:9px;height:1px;background:var(--vigil-gold);opacity:.55;transform-origin:center}
.hero.vigil .vigil-nights i:nth-child(10n){width:22px;opacity:1}

.hero.vigil .vigil-copy{position:absolute;z-index:3;left:clamp(28px,6vw,112px);bottom:clamp(52px,9svh,104px);width:calc(var(--vigil-panel) - clamp(28px,6vw,112px) - 52px)}
.hero.vigil .vigil-title{margin:0;display:block;font:500 clamp(58px,6.7vw,128px)/.9 var(--serif);letter-spacing:-.045em;color:var(--vigil-cream)}
.hero.vigil .vigil-line{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em}
.hero.vigil .vigil-line>span{display:block}
.hero.vigil .vigil-line-indent{padding-left:.42em}
.hero.vigil .vigil-arabic{margin:.18em 0 0;text-align:right;font:600 clamp(36px,3.5vw,62px)/1.55 "Noto Naskh Arabic",serif;color:var(--vigil-gold)}
.hero.vigil .vigil-note{margin:18px 0 0;max-width:34ch;font:400 clamp(15px,1.1vw,17px)/1.65 var(--sans);color:var(--vigil-muted)}
.hero.vigil .vigil-cta{display:inline-flex;align-items:center;gap:14px;margin-top:30px;padding:15px 24px;border:1px solid rgba(241,236,223,.55);color:var(--vigil-cream);text-decoration:none;font:500 14px/1 var(--sans);letter-spacing:.01em;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.hero.vigil .vigil-cta::after{content:"";width:18px;height:1px;background:currentColor;transition:width .25s ease}
.hero.vigil .vigil-cta:hover{background:var(--vigil-cream);border-color:var(--vigil-cream);color:var(--vigil-ink)}
.hero.vigil .vigil-cta:hover::after{width:28px}
.hero.vigil .vigil-meta{display:flex;gap:22px;margin:38px 0 0;font:400 12px/1 var(--sans);letter-spacing:.02em;color:rgba(241,236,223,.46)}
.hero.vigil .vigil-meta span+span::before{content:"";display:inline-block;width:14px;height:1px;margin-right:22px;vertical-align:middle;background:rgba(194,164,109,.7)}

/* Tablet and phone: the photograph becomes a framed portrait shown whole, with the words beneath it on ink. */
@media (max-width:900px){
  body:not(.commerce-shop) .hero.vigil{height:auto;min-height:0;max-height:none}
  .hero.vigil .vigil-frame{position:relative;width:100%;height:auto;aspect-ratio:3/4;max-height:72svh}
  .hero.vigil .hero-image img{object-position:62% 45%}
  .hero.vigil .hero-image::after{background:linear-gradient(180deg,rgba(11,11,10,.78) 0%,rgba(11,11,10,0) 26%),linear-gradient(0deg,var(--vigil-ink) 0%,rgba(11,11,10,0) 16%)}
  .hero.vigil .vigil-nights{position:relative;top:auto;bottom:auto;left:auto;width:auto;height:18px;margin:18px 7vw 0;flex-direction:row;align-items:center}
  .hero.vigil .vigil-nights i{width:1px;height:8px}
  .hero.vigil .vigil-nights i:nth-child(10n){width:1px;height:18px}
  .hero.vigil .vigil-copy{position:relative;left:auto;bottom:auto;width:auto;padding:34px 7vw 64px}
  .hero.vigil .vigil-title{font-size:clamp(54px,12.5vw,104px)}
  .hero.vigil .vigil-arabic{font-size:clamp(34px,8.4vw,58px)}
  .hero.vigil .vigil-note{font-size:15px}
}
@media (max-width:720px){
  .hero.vigil .vigil-frame{max-height:68svh}
  .hero.vigil .vigil-title{font-size:clamp(50px,14.5vw,72px)}
  .hero.vigil .vigil-copy{padding:28px 7vw 56px}
  .hero.vigil .vigil-cta{width:100%;justify-content:space-between}
}

/* Entrance: only hidden when the motion script is about to run it (see vigil.js). */
.vigil-motion .hero.vigil .hero-image,.vigil-motion .hero.vigil .vigil-line>span,.vigil-motion .hero.vigil .vigil-nights i,
.vigil-motion .hero.vigil .vigil-arabic,.vigil-motion .hero.vigil .vigil-note,.vigil-motion .hero.vigil .vigil-cta,.vigil-motion .hero.vigil .vigil-meta{visibility:hidden}

/* ---- Collection: type, spacing and hierarchy (home and shop) ------------------------------------------------- */
body .collection.original-product-ui{padding-top:clamp(84px,9vw,140px);padding-bottom:clamp(96px,10vw,160px)}
body .collection .collection-head{grid-template-columns:minmax(0,1.5fr) minmax(220px,.5fr);grid-template-areas:"index index" "title note";row-gap:18px;column-gap:48px;align-items:end;padding-bottom:34px}
body .collection .collection-head .section-index{grid-area:index;font:500 12px/1 var(--sans);letter-spacing:.08em;color:#8a7350}
body .collection .collection-head h2{grid-area:title;font:500 clamp(54px,6.4vw,112px)/.92 var(--serif);letter-spacing:-.05em;color:#14120e}
body .collection .collection-head p:last-child{grid-area:note;display:block;justify-self:end;max-width:24ch;text-align:right;font:400 italic 20px/1.35 var(--serif);color:#4c4236}
body .collection .filter-list{margin:30px 0 38px;gap:10px}
body .collection .filter-list button{min-width:0;min-height:42px;padding:0 20px;border-color:rgba(23,21,17,.28);font:500 13px/1 var(--sans);letter-spacing:.01em;text-transform:none}
body .collection.original-product-ui .products{gap:clamp(20px,2.6vw,44px)}
body .collection.original-product-ui .product-image span{font:500 12px/1 var(--sans);letter-spacing:.01em;text-transform:none;padding:11px 14px;background:rgba(238,231,221,.94)}
body .collection.original-product-ui .product-meta{padding-top:24px}
body .collection.original-product-ui .product-meta h3{font:500 clamp(27px,2.4vw,38px)/1.02 var(--serif);letter-spacing:-.035em;min-height:0;height:1.12em;white-space:nowrap;margin:0 0 12px}
body .collection.original-product-ui .product-meta p{font:400 14px/1.6 var(--sans);color:#5a4f42;min-height:3.2em}
body .collection.original-product-ui .product-meta .original-price{align-items:baseline;margin:20px 0 14px;padding:16px 0 0}
body .collection.original-product-ui .product-meta .original-price strong{font:500 26px/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums}
body .collection.original-product-ui .product-meta .original-price span{font:400 13px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:#7a6c5a}
body .collection.original-product-ui .product-details-link{font:500 13px/1.2 var(--sans);letter-spacing:.01em;text-transform:none;margin:0 0 20px;padding:6px 0;border-bottom-color:rgba(23,20,16,.45)}
body .collection.original-product-ui .product-meta .add{min-height:54px;padding:0 20px;font:500 14px/1 var(--sans);letter-spacing:.01em;text-transform:none;background:#16130f}
body .collection.original-product-ui .product-meta .add b{font:300 22px/1 var(--sans)}
@media (max-width:1050px){
  body .collection .collection-head{grid-template-columns:1fr;grid-template-areas:"index" "title" "note"}
  body .collection .collection-head p:last-child{display:block;justify-self:start;text-align:left}
}
@media (max-width:720px){
  body .collection .collection-head h2{font-size:clamp(46px,12.5vw,68px);margin:0}
  body .collection .collection-head p:last-child{font-size:18px}
  body .collection .filter-list button{flex:1;padding:0 10px}
  body .collection.original-product-ui .product-meta h3{font-size:31px}
  body .collection.original-product-ui .product-meta p{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  .hero.vigil .vigil-cta,.hero.vigil .vigil-cta::after{transition:none}
}

/* ---- Garment detail atlas: larger supporting photographs (home) ---------------------------------------------- */
/* Each figure keeps its original proportions (height follows width) and the section keeps its height; the photos
   are placed so they clear the main embroidery image, each other and the captions. */
.detail-atlas .atlas-float{height:auto}
.detail-atlas .atlas-float-one{aspect-ratio:195/255}
.detail-atlas .atlas-float-two{aspect-ratio:215/295}
.detail-atlas .atlas-float-three{aspect-ratio:205/275}
.detail-atlas .atlas-float-four{aspect-ratio:205/280}
@media (min-width:1181px){
  .detail-atlas .atlas-float-one{top:600px;left:8.5vw;right:auto;width:min(20vw,300px)}
  .detail-atlas .atlas-float-three{top:960px;left:31vw;right:auto;width:min(20vw,300px)}
  .detail-atlas .atlas-float-four{top:1020px;left:53.5vw;right:auto;width:min(19vw,285px)}
  .detail-atlas .atlas-float-two{top:975px;right:5.5vw;left:auto;width:min(19.5vw,292px)}
}
@media (min-width:721px) and (max-width:1180px){
  .detail-atlas .atlas-float-one{top:560px;left:7vw;right:auto;width:31vw}
  .detail-atlas .atlas-float-three{top:960px;left:7vw;right:auto;width:32vw}
  .detail-atlas .atlas-float-two{top:990px;right:6vw;left:auto;width:32vw}
  .detail-atlas .atlas-float-four{top:1340px;left:34vw;right:auto;width:31vw}
}
@media (max-width:720px){
  .detail-atlas .atlas-float-one{top:770px;left:7vw;right:auto;width:calc(43vw - 6px)}
  .detail-atlas .atlas-float-three{top:850px;right:7vw;left:auto;width:calc(43vw - 6px)}
  .detail-atlas .atlas-float-two{top:1010px;left:7vw;right:auto;width:calc(43vw - 6px)}
  .detail-atlas .atlas-float-four{top:1100px;right:7vw;left:auto;width:calc(43vw - 6px)}
}

/* ---- Phase 4: product cards (home and shop) ------------------------------------------------------------------ */
body .collection.original-product-ui .product-image{isolation:isolate}
body .collection.original-product-ui .product-image img.product-image-alt{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transform:none}
body .collection.original-product-ui .product-image span{z-index:2;transition:opacity .35s ease,transform .35s ease,background-color .25s ease}
@media (hover:hover) and (pointer:fine){
  body .collection.original-product-ui .product-image span{opacity:0;transform:translateY(6px)}
  body .collection.original-product-ui .product-image:hover span,body .collection.original-product-ui .product-image:focus-visible span{opacity:1;transform:none}
}
body .collection.original-product-ui .product-meta>div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title price" "summary summary" "category link";align-items:baseline;column-gap:18px}
body .collection.original-product-ui .product-meta h3{grid-area:title;height:auto;white-space:normal;margin:0}
body .collection.original-product-ui .product-meta .original-price{display:contents}
body .collection.original-product-ui .product-meta .original-price strong{grid-area:price;justify-self:end;font:500 24px/1 var(--serif)}
body .collection.original-product-ui .product-meta p{grid-area:summary;margin:12px 0 0;min-height:0}
body .collection.original-product-ui .product-meta .original-price span{grid-area:category;margin:18px 0 22px;padding-top:16px;border-top:1px solid rgba(23,21,17,.18);font:400 13px/1.2 var(--sans)}
body .collection.original-product-ui .product-details-link{grid-area:link;justify-self:end;align-self:start;margin:18px 0 22px;padding:16px 0 0;border:0;border-top:1px solid rgba(23,21,17,.18);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(23,20,16,.35)}
body .collection.original-product-ui .product-details-link:hover{text-decoration-color:currentColor}
body .collection.original-product-ui .product-meta .add{margin-top:auto;background:transparent;color:#16130f;border:1px solid rgba(22,19,15,.55);transition:background-color .25s ease,color .25s ease,border-color .25s ease}
body .collection.original-product-ui .product-meta .add:hover,body .collection.original-product-ui .product-meta .add:focus-visible{background:#16130f;color:#f1ecdf;border-color:#16130f}

/* Shop page heading speaks the same language as the homepage hero: roman serif, no accent word. */
.commerce-shop .shop-hero .eyebrow{font:500 12px/1 var(--sans);letter-spacing:.08em;color:#8a7350}
.commerce-shop .shop-hero h1{font-weight:500;letter-spacing:-.05em}
.commerce-shop .shop-hero h1 em{font-style:normal}
.commerce-shop .shop-hero p:last-child{font:400 16px/1.6 var(--sans);color:#4c4236;max-width:48ch}

/* ---- Phase 4: Quick Look --------------------------------------------------------------------------------------- */
dialog.quick-view{background:var(--vigil-cream);color:#16130f}
dialog.quick-view::backdrop{background:rgba(8,8,7,.78);backdrop-filter:blur(8px)}
dialog.quick-view .dialog-gallery{position:relative;background:var(--vigil-ink);padding:22px}
dialog.quick-view .dialog-gallery>img{object-position:center 30%}
dialog.quick-view .dialog-image-ghost{position:absolute;z-index:1;margin:0;object-fit:cover;object-position:center 30%;pointer-events:none}
dialog.quick-view .dialog-gallery>div{gap:10px;margin-top:14px}
dialog.quick-view .dialog-gallery button{width:60px;height:75px;padding:0;border:0;background:#1d1a16;opacity:.5;position:relative;transition:opacity .25s ease}
dialog.quick-view .dialog-gallery button::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;background:var(--vigil-gold);transform:scaleX(0);transition:transform .3s ease}
dialog.quick-view .dialog-gallery button:hover{opacity:.85}
dialog.quick-view .dialog-gallery button.active{opacity:1;border:0}
dialog.quick-view .dialog-gallery button.active::after{transform:scaleX(1)}
dialog.quick-view .dialog-gallery button:focus-visible{outline:2px solid var(--vigil-gold);outline-offset:3px}
dialog.quick-view .dialog-info .eyebrow{font:500 13px/1 var(--sans);letter-spacing:.04em;text-transform:none;color:#8a7350}
dialog.quick-view .dialog-info h2{font:500 clamp(38px,3.7vw,58px)/1 var(--serif);letter-spacing:-.045em;margin:16px 0 12px}
dialog.quick-view .dialog-info>p.dialog-price{font:500 26px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;margin:0 0 20px}
dialog.quick-view .dialog-info>p:not(.eyebrow):not(.dialog-price){font:400 15px/1.6 var(--sans);color:#4c4236;max-width:40ch}
dialog.quick-view .size-label{font:500 13px/1 var(--sans);letter-spacing:.01em;color:#4c4236;margin-top:28px}
dialog.quick-view .size-label span{color:#16130f}
dialog.quick-view .sizes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0 22px;max-width:340px}
dialog.quick-view .sizes button{width:auto;min-width:0;height:48px;min-height:48px;border:1px solid rgba(22,19,15,.28);background:transparent;color:#16130f;font:500 14px/1 var(--sans);transition:border-color .2s ease,background-color .2s ease,color .2s ease}
dialog.quick-view .sizes button:hover{border-color:#16130f;background:transparent;color:#16130f}
dialog.quick-view .sizes button.selected{background:#16130f;border-color:#16130f;color:#f1ecdf}
dialog.quick-view .sizes button:focus-visible,dialog.quick-view .quantity button:focus-visible{outline:2px solid #a17b43;outline-offset:2px}
dialog.quick-view .quantity{margin:0 0 26px;border:1px solid rgba(22,19,15,.28);width:max-content}
dialog.quick-view .quantity button{width:44px;height:44px;border:0;background:transparent;font:400 18px/1 var(--sans)}
dialog.quick-view .quantity button:hover{background:rgba(22,19,15,.06)}
dialog.quick-view .quantity span{width:36px;font:500 14px/1 var(--sans)}
dialog.quick-view .dialog-add{background:#16130f;color:#f1ecdf;border:1px solid #16130f;padding:0 22px;font:500 14px/1 var(--sans);letter-spacing:.01em;text-transform:none;opacity:1;transform:none;transition:background-color .25s ease}
dialog.quick-view .dialog-add:hover:not(:disabled){background:#2c251c;transform:none}
dialog.quick-view .dialog-add:disabled{background:transparent;color:#7a6c5a;border:1px dashed rgba(22,19,15,.35);opacity:1;cursor:not-allowed}
dialog.quick-view .continue-shopping{font:500 13px/1 var(--sans);letter-spacing:.01em;text-transform:none;border-bottom-color:rgba(22,19,15,.4);margin-top:18px}
dialog.quick-view .dialog-close{background:var(--vigil-cream);border:1px solid rgba(22,19,15,.3);color:#16130f;transition:background-color .2s ease,color .2s ease}
dialog.quick-view .dialog-close:hover{background:#16130f;color:#f1ecdf}

/* Bag status line: tells sighted and screen-reader users what was just added. */
.cart .cart-status{margin:0;padding:0 30px;font:500 13px/1.4 var(--sans);color:#6b5732}
.cart .cart-status:not(:empty){padding-top:14px}

@media (max-width:720px){
  body .collection.original-product-ui .product-meta .original-price strong{font-size:22px}
  dialog.quick-view .dialog-gallery{padding:12px}
  dialog.quick-view .dialog-gallery button{width:46px;height:58px}
  dialog.quick-view .dialog-info h2{font-size:36px;margin:10px 0 8px}
  dialog.quick-view .dialog-info>p.dialog-price{font-size:22px;line-height:1;margin-bottom:10px}
  dialog.quick-view .size-label{margin-top:14px}
  dialog.quick-view .sizes{max-width:none;margin:10px 0 14px}
  dialog.quick-view .sizes button{height:46px;min-height:46px}
  dialog.quick-view .quantity{margin-bottom:14px}
  .cart .cart-status{padding:0 22px}
}
@media (prefers-reduced-motion:reduce){
  body .collection.original-product-ui .product-image span,dialog.quick-view .dialog-gallery button,dialog.quick-view .dialog-gallery button::after{transition:none}
}