/* ═══════════════════ THE COLLECTION PAGE ═══════════════════
   Shop / Lookbook / Campaign — the three ways into a season.

   Ported from design/shop-proposal/template.html, which is the approved
   design. Where the rules differ from that file it is for one of two reasons,
   both noted at the rule: a class name that would have collided with the
   theme, or a CSS-only control replaced by a real link because each view now
   has its own web address.

   ⚠ TWO RENAMES FROM THE DESIGN, and they are not cosmetic:
     .top     → .lb-top      `.top` is the site's FIXED header wrapper. A
                             `.top` inside the slideshow would have been
                             yanked to the top of the window and pinned there.
     .counter → .lb-counter  `.counter` is the front page's page number in
                             deck.css. The collection page does not load
                             deck.css today, but a name that is already taken
                             is a trap for whoever adds the next stylesheet.

   This file loads ONLY on a collection page — see erabynaz_collection_assets()
   in inc/collections-nav.php. Nothing here can reach the landing page. */

/* ---------- the page itself ----------
   site.css styles <main> as a centring flexbox with 130px of padding, because
   every other page on this site is a card floating in the middle of the screen.
   The collection is the opposite: full-bleed grids that run to both edges. So
   this page opts out of that shell entirely and keeps only the top padding the
   fixed toolbar needs. Without this the essay and the looks were squeezed into
   a narrow centred column with the head pushed off the top. */
main.collection-public{display:block; padding:0; min-height:0;
  max-width:1320px; margin:0 auto}
/* Why a cap at all, when the design is full-bleed grids: at 1600px and wider,
   three columns make each packshot tile over 700px tall, and her packshots
   carry their own white margin — the garment ends up floating in a field of
   nothing. 1320 keeps a tile near the proportion the design was drawn at.
   Below that width the page is full-bleed exactly as designed. */
.collection-public .collection-head{padding-top:calc(57px + 40px)}
@media(max-width:560px){
  .collection-public .collection-head{padding-top:calc(57px + 22px)}
}

/* ---------- the controls are not buttons ----------
   Two separate things in site.css paint a <button>:

     THE BUTTON LAW (foot of site.css)  black box, uppercase, bordered.
                                        Opted out of by name with `.plain`.
     `button{...}` at site.css:76       width:100%, margin-top:26px, padding:15px,
                                        black background. A plain base rule, NOT
                                        part of the law, so `.plain` does not
                                        touch it — this is what stretched READ
                                        MORE's underline the full width of the
                                        column and put a black square behind
                                        every look.

   So the lookbook's controls undo the base rule here, explicitly. collection.css
   loads after site.css, so no !important is needed — which is the point. */
.look-tile,.more,.slideshow .close,.slideshow .arrow{
  width:auto; margin:0; background:none; border:0; color:inherit;
  font-family:inherit; -webkit-appearance:none; appearance:none}

/* ---------- head + the three tabs ----------
   In the design these were radio buttons and `:checked ~` selectors, because a
   mockup has no server. Here each view is a real URL, so they are links and the
   current one carries .on. That is what makes Lookbook shareable, bookmarkable
   and cacheable on its own. */
.collection-head{text-align:center; padding:40px 24px 26px;
  border-bottom:1px solid var(--hair)}
.collection-head .eyebrow{color:var(--grey); font-size:10.5px;
  letter-spacing:.14em; margin-bottom:12px}
.collection-head h1{font-weight:500; font-size:15px; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:22px}
.ctabs{display:flex; justify-content:center; gap:30px}
.ctabs a{color:var(--grey); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; padding:6px 0; text-decoration:none;
  border-bottom:1px solid transparent}
.ctabs a:hover{color:var(--ink)}
.ctabs a.on{color:var(--ink); border-bottom-color:var(--ink)}

/* ---------- the shop ----------
   Three across, the packshot uncropped on white, name and price beneath. The
   whole tile is one link to the piece — the size is chosen there, not here. */
.shop-bar{display:flex; justify-content:center; align-items:baseline;
  padding:22px 24px; border-bottom:1px solid var(--hair); gap:10px; flex-wrap:wrap}
.shop-bar h2{font-weight:500; font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; margin:0}
.shop-bar .count{color:var(--grey); font-size:11px; letter-spacing:.08em}

.grid{display:grid; grid-template-columns:repeat(3,1fr)}
.grid .tile{display:block; text-decoration:none; color:inherit;
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.grid .tile:nth-child(3n){border-right:0}
/* The packshots are shot on white, so the tile stays white and the piece is
   contained rather than cropped — object-fit:cover would cut off a hem. */
.tile .shot{aspect-ratio:3/4; overflow:hidden; background-color:#fff; position:relative}
.tile .shot img{width:100%; height:100%; object-fit:contain; display:block;
  transition:transform .6s var(--ease,ease)}
.tile:hover .shot img{transform:scale(1.035)}
.tile .cap{padding:14px 16px 20px}
.tile .name{font-size:12px; letter-spacing:.03em; text-transform:none;
  font-weight:500; margin-bottom:5px}
.tile .price{color:var(--grey); font-variant-numeric:tabular-nums; font-size:11.5px}
.tile .price del{opacity:.5; margin-right:6px}
.tile .meta{color:var(--grey); font-size:10px; letter-spacing:.05em;
  text-transform:none; margin-top:6px}
@media(prefers-reduced-motion:reduce){ .tile .shot img{transition:none} }

@media(max-width:760px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid .tile:nth-child(3n){border-right:1px solid var(--hair)}
  .grid .tile:nth-child(2n){border-right:0}
  .tile .cap{padding:12px 12px 18px}
}

.shop-empty{padding:70px 24px 90px; text-align:center; color:var(--grey)}
.shop-empty p{text-transform:none; letter-spacing:.02em; font-size:14px; margin:0}
.shop-empty-hint{margin-top:12px !important; font-size:12.5px; opacity:.75;
  max-width:52ch; margin-left:auto; margin-right:auto}

/* ---------- campaign ----------
   The image story. No products, no prices, nothing to click. Three across so a
   visitor sees the season at a glance rather than scrolling a picture at a time. */
.camp-title{padding:44px 24px 38px; text-align:center;
  border-bottom:1px solid var(--hair)}
.camp-title .season{color:var(--grey); font-size:10.5px; letter-spacing:.14em;
  margin-bottom:12px}
.camp-title h2{font-weight:300; font-size:clamp(20px,4vw,38px);
  letter-spacing:.2em; text-transform:uppercase; line-height:1.25;
  text-indent:.2em; text-wrap:balance}
.campgrid{display:grid; grid-template-columns:repeat(3,1fr)}
.campgrid figure{aspect-ratio:2/3; overflow:hidden; background:var(--sand,#f4f1ea);
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair); margin:0}
.campgrid figure:nth-child(3n){border-right:0}
.campgrid img{width:100%; height:100%; object-fit:cover; display:block}
@media(max-width:760px){
  .campgrid{grid-template-columns:repeat(2,1fr)}
  .campgrid figure:nth-child(3n){border-right:1px solid var(--hair)}
  .campgrid figure:nth-child(2n){border-right:0}
}

/* ---------- lookbook ----------
   Ten looks, numbered, nothing named and nothing priced. Anyone who wants to buy
   switches back to Shop; this view does one job, which is to be looked at. */
.lookwrap{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.essay{padding:40px 34px 44px; border-right:1px solid var(--hair)}
.essay .byline{display:flex; flex-direction:column; gap:3px; color:var(--grey);
  font-size:10px; letter-spacing:.13em; padding-bottom:18px; margin-bottom:26px;
  border-bottom:1px solid var(--hair)}
.essay p{text-transform:none; letter-spacing:.005em; font-weight:300;
  font-size:15px; line-height:1.75; max-width:60ch; margin-bottom:19px}
.essay p:last-child{margin-bottom:0}
.essay .lead::first-letter{font-size:52px; line-height:.82; float:left;
  padding:6px 10px 0 0; font-weight:300}
.more{display:none}

@media(max-width:900px){
  .lookwrap{grid-template-columns:1fr}
  .essay{border-right:0; border-bottom:1px solid var(--hair)}
}

/* ---------- the phone ----------
   The essay folds to about fifteen lines with a fade, and READ MORE opens it.
   A wall of text above the photographs is what makes people leave. */
@media(max-width:760px){
  .essay{padding:26px 20px 0}
  .essay-body{position:relative; max-height:15.5em; overflow:hidden}
  .lookbook.is-open .essay-body{max-height:none}
  .essay-body::after{content:''; position:absolute; left:0; right:0; bottom:0;
    height:4.5em; background:linear-gradient(to bottom,rgba(253,252,249,0),var(--paper))}
  .lookbook.is-open .essay-body::after{display:none}
  /* width:auto and text-align:left are not decoration: a <button> inherits a
     full-width, centred box here, which drew the underline right across the
     column instead of under the two words. */
  .more{display:inline-block; width:auto; text-align:left;
    margin:14px 0 26px; cursor:pointer;
    font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
    border-bottom:1px solid var(--ink); padding:0 0 3px;
    background:none; border-top:0; border-left:0; border-right:0; color:inherit}
  .more .c{display:none}
  .lookbook.is-open .more .o{display:none}
  .lookbook.is-open .more .c{display:inline}
  .essay p{font-size:14.5px; line-height:1.7}
  .essay .lead::first-letter{font-size:40px}
}

.lookgrid{display:grid; grid-template-columns:repeat(2,1fr); align-content:start}
.look-tile{position:relative; aspect-ratio:2/3; overflow:hidden; cursor:pointer;
  display:block; width:100%; padding:0; background:none;
  border:0; border-right:1px solid var(--hair); border-bottom:1px solid var(--hair)}
.lookgrid .look-tile:nth-child(2n){border-right:0}
.look-tile img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease,ease)}
.look-tile:hover img{transform:scale(1.03)}
.look-tile .n{position:absolute; left:12px; bottom:12px; color:#fff;
  font-size:11px; letter-spacing:.1em; font-variant-numeric:tabular-nums;
  text-shadow:0 1px 6px rgba(0,0,0,.55)}
@media(prefers-reduced-motion:reduce){ .look-tile img{transition:none} }

/* The slideshow stays black — the one place the white paper gives way, because
   a look should have nothing around it. */
.slideshow{display:none; position:fixed; inset:0; z-index:400;
  background:#0b0b0b; color:#f2f2f2; flex-direction:column}
.slideshow.open{display:flex}
.slideshow .lb-top{display:flex; justify-content:space-between;
  align-items:center; padding:18px 22px}
.slideshow .lb-top .name{font-size:11.5px; letter-spacing:.14em}
.slideshow .close{cursor:pointer; font-size:22px; line-height:1; padding:2px 8px;
  opacity:.8; background:none; border:0; color:inherit}
.slideshow .close:hover{opacity:1}
.stage{flex:1; display:flex; align-items:center; justify-content:center;
  gap:24px; min-height:0; padding:0 20px}
.stage img{max-height:100%; max-width:min(62vw,620px); object-fit:contain}
.arrow{cursor:pointer; font-size:20px; padding:12px; opacity:.7;
  user-select:none; background:none; border:0; color:inherit; font-family:inherit}
.arrow:hover{opacity:1}
.lb-counter{text-align:center; font-size:11px; letter-spacing:.12em;
  color:#b5b5b5; padding:14px 0 4px; font-variant-numeric:tabular-nums}
.filmstrip{display:flex; gap:8px; overflow-x:auto; padding:14px 20px;
  border-top:1px solid #2a2a2a}
.filmstrip img{width:50px; height:72px; object-fit:cover; opacity:.45;
  cursor:pointer; flex:0 0 auto; transition:opacity .2s}
.filmstrip img:hover{opacity:.8}
.filmstrip img.on{opacity:1; outline:1px solid #f2f2f2; outline-offset:2px}

/* The lookbook's controls carry `.plain`, which THE BUTTON LAW in site.css
   exempts by name — see the note at the law itself. No !important here, and no
   fighting over specificity: the law simply does not apply to them. */

/* The phone: one column of looks, and the campaign already halves itself above. */
@media(max-width:560px){
  .stage img{max-width:86vw}
  .stage{gap:6px; padding:0 4px}
  .collection-head{padding:28px 18px 20px}
  .ctabs{gap:22px}
}

/* ═══════════════════ THE PIECE PAGE ═══════════════════
   Every rule scoped to body.erabynaz-piece-page, so this file can be loaded on
   a product page without reaching the shop, the account or anything else. */
/* ⚠ width:100% and the body-scoped selector are BOTH load-bearing. site.css
   makes <main> a centring flexbox for the card pages; inside it the product
   grid shrank to its content and the text column measured 132px on the live
   site — the title broke over three lines. Blocking the shell is not enough:
   the grid must also be told to fill it. */
body.erabynaz-piece-page main{display:block !important; padding:0; min-height:0;
  max-width:1160px; margin:0 auto; width:100%}
body.erabynaz-piece-page div.product{width:100%}
.erabynaz-piece-page div.product{display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:0;
  padding-top:57px}

/* The photographs, one under the other, full width of their column. */
.erabynaz-piece-page .woocommerce-product-gallery{width:100%; float:none; margin:0}
.erabynaz-piece-page .woocommerce-product-gallery__wrapper{display:block}
.erabynaz-piece-page .woocommerce-product-gallery__image{display:block; margin:0 0 2px}
/* Her packshots are shot on WHITE and she has stripped every background
   colour out of them. So the frame behind them is white too — the paper cream
   of the rest of the site shows as a grey halo around a cut-out garment. */
.erabynaz-piece-page .woocommerce-product-gallery__image{background:#fff}
.erabynaz-piece-page .woocommerce-product-gallery__image img{width:100%; height:auto; display:block}
/* WooCommerce's zoom/lightbox triggers are chrome the design does not have. */
.erabynaz-piece-page .woocommerce-product-gallery__trigger{display:none}
/* Its thumbnail strip duplicates the stack above it. */
.erabynaz-piece-page .flex-control-thumbs{display:none}

.erabynaz-piece-page .summary{padding:0 0 60px 44px; position:sticky; top:80px;
  align-self:start; max-width:430px}
.pp-eyebrow{color:var(--grey); font-size:10px; letter-spacing:.16em; margin-bottom:14px}
.pp-title{font-size:19px; letter-spacing:.02em; text-transform:none;
  font-weight:500; margin:0 0 10px; line-height:1.35}
.pp-price{font-size:15px; letter-spacing:.04em; font-variant-numeric:tabular-nums;
  margin-bottom:8px}
.pp-price del{opacity:.45; margin-right:8px}
.pp-mto{color:var(--grey); font-size:11px; letter-spacing:.04em;
  text-transform:none; margin-bottom:26px}
.pp-field{margin-bottom:22px}
.pp-label{font-size:9.5px; letter-spacing:.2em; opacity:.5; margin-bottom:9px}
.pp-colours{display:flex; gap:14px; flex-wrap:wrap; font-size:12px;
  letter-spacing:.04em; text-transform:none}
.pp-colours span{opacity:.45; padding-bottom:2px; border-bottom:1px solid transparent}
.pp-colours span.on{opacity:1; border-bottom-color:var(--ink)}

/* The size buttons — a face over WooCommerce's own select. See piece.js. */
.pp-sizes{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.pp-size{min-width:46px; padding:10px 12px; background:none; color:var(--ink);
  border:1px solid var(--hair); border-radius:0; cursor:pointer;
  font-size:11px; letter-spacing:.1em; font-family:inherit; width:auto; margin:0}
.pp-size:hover{border-color:var(--ink)}
.pp-size.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.pp-select-hidden{position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap}

/* WooCommerce's own table around the chooser, flattened. */
.erabynaz-piece-page table.variations{width:100%; margin:0 0 18px; border:0}
.erabynaz-piece-page table.variations th,
.erabynaz-piece-page table.variations td{display:block; padding:0; border:0; text-align:left}
.erabynaz-piece-page table.variations label{font-size:9.5px; letter-spacing:.2em;
  opacity:.5; text-transform:uppercase}
.erabynaz-piece-page .reset_variations{font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; opacity:.55}
/* The quantity box: a piece is cut to order, one at a time. */
.erabynaz-piece-page .quantity{display:none}
.erabynaz-piece-page .single_variation_wrap .woocommerce-variation-price{margin-bottom:14px}

.erabynaz-piece-page .single_add_to_cart_button{width:100% !important;
  padding:15px !important; font-size:10px !important; letter-spacing:.2em !important}
.pp-hint{color:var(--grey); font-size:10.5px; letter-spacing:.04em;
  text-transform:none; margin-top:10px}

/* The five sections. */
.pp-sec{border-top:1px solid var(--hair)}
.pp-sec:last-of-type{border-bottom:1px solid var(--hair)}
.pp-sec>summary{display:flex; justify-content:space-between; align-items:center;
  cursor:pointer; list-style:none; padding:15px 0;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase}
.pp-sec>summary::-webkit-details-marker{display:none}
.pp-sec .op{opacity:.45; font-size:13px}
.pp-sec[open] .op{transform:rotate(45deg)}
.pp-body{padding:0 0 18px}
.pp-body p{text-transform:none; letter-spacing:.01em; font-size:13.5px;
  line-height:1.75; margin:0 0 12px; color:#3b3a37}
.pp-body p:last-child{margin-bottom:0}
.pp-worn{display:block; margin-top:12px; color:var(--grey); font-size:12px;
  text-transform:none; letter-spacing:.02em}

@media(max-width:900px){
  .erabynaz-piece-page div.product{grid-template-columns:1fr; padding-top:57px}
  .erabynaz-piece-page .summary{padding:26px 20px 60px; position:static;
    max-width:none}
}

/* Men, before there is menswear. */
.shopnav-soon-note{display:block; padding:12px 18px; color:var(--grey);
  font-size:11.5px; letter-spacing:.08em; text-transform:none}
.shopnav-item--soon:hover .shopnav-menu,
.shopnav-item--soon:focus-within .shopnav-menu{display:flex}

/* Her packshots on the piece page: one under the other, on white, never
   cropped. The garments are cut out, so a cream page behind them reads as a
   grey halo. */
.pp-gallery{display:block; background:#fff}
.pp-gallery img{width:100%; height:auto; display:block; margin:0 0 2px}

/* ⚠ THE REASON THE PIECE PAGE LOOKED LIKE A PHONE ON A DESKTOP.
   woocommerce.php wraps the product in `.card.wide`, the theme's centred white
   box used by every account and content page. It is 620px wide. Inside it the
   two-column grid had 620px to share, so the text column measured 132px and the
   title broke over four lines — measured on the live site, not guessed.
   The piece page is full-bleed by design, so on this page only, the card stops
   being a card. */
body.erabynaz-piece-page .card,
body.erabynaz-piece-page .card.wide{
  max-width:none; width:100%; padding:0; margin:0;
  background:none; border:0; box-shadow:none; border-radius:0}

/* One colourway visible at a time. All of them are in the page already, so
   switching is instant and costs no download. */
.pp-cw{display:none}
.pp-cw.on{display:block}
.pp-noshot{padding:60px 24px;text-align:center;color:var(--grey);
  font-size:13px;letter-spacing:.02em;text-transform:none}
.pp-colour{background:none;border:0;padding:0 0 2px;margin:0;width:auto;
  font-family:inherit;font-size:12px;letter-spacing:.04em;text-transform:none;
  color:var(--ink);opacity:.45;cursor:pointer;border-bottom:1px solid transparent}
.pp-colour:hover{opacity:.8}
.pp-colour.on{opacity:1;border-bottom-color:var(--ink)}

/* ---------------------------------------------------------------------------
   SOLD OUT, AND THE BOX THAT REPLACES ADD TO BAG
   inc/availability.php. Her instruction 2026-10-05: a piece that is not
   available should read as sold out and offer to write to the customer.

   Deliberately NOT a greyed-out button. "Sold out" is set in the same small
   capitals as the rest of the page furniture, and the field below it is a
   single rule — the same line the newsletter box uses — so the page keeps its
   one voice. The button carries .plain so the BUTTON LAW in site.css leaves it
   alone; without that it becomes a filled black block and shouts.
--------------------------------------------------------------------------- */
.pp-soldout { margin: 26px 0 0; }

.pp-soldout-label {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #000;
}

.pp-soldout-note,
.pp-soldout-done {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.7;
	color: #555;
	max-width: 34em;
}

.pp-soldout-err {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.6;
	color: #9b2c2c;
}

.pp-restock {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: flex-end;
	max-width: 30em;
}

.pp-restock-size select {
	flex: 0 0 auto;
	padding: 9px 22px 9px 0;
	border: 0;
	border-bottom: 1px solid #000;
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: #000;
	-webkit-appearance: none;
	appearance: none;
	/* the chevron, drawn rather than loaded: an external image here would be a
	   second request for 7px of artwork, and it must stay black on white. */
	background-image: linear-gradient(45deg, transparent 50%, #000 50%),
	                  linear-gradient(135deg, #000 50%, transparent 50%);
	background-position: right 7px center, right 2px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

.pp-restock-size select:focus {
	outline: none;
	border-bottom-width: 2px;
	padding-bottom: 8px;
}

.pp-restock input[type="email"] {
	flex: 1 1 15em;
	min-width: 0;
	padding: 9px 0;
	border: 0;
	border-bottom: 1px solid #000;
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	color: #000;
}

.pp-restock input[type="email"]:focus {
	outline: none;
	border-bottom-width: 2px;
	padding-bottom: 8px;   /* hold the baseline while the rule thickens */
}

.pp-restock button.plain {
	flex: 0 0 auto;
	padding: 9px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #000;
	text-decoration: underline;
	text-underline-offset: 5px;
	cursor: pointer;
}

@media (max-width: 600px) {
	.pp-restock { gap: 10px; }
	.pp-restock button.plain { padding-top: 2px; }
}


/* The Handbags bar carries only the count — see inc/handbags.php. Without a
   heading beside it the row would sit hard against the title, so it keeps the
   bar's rhythm and simply has nothing on the left. */
.shop-bar.shop-bar--plain { justify-content: flex-start; }
.shop-bar.shop-bar--plain .count { margin-left: 0; }

/* ---------------------------------------------------------------------------
   A PHOTOGRAPH, FULL SIZE
   assets/lightbox.js. Her spec 2026-10-16: tap a picture and see it big.

   Ink, not paper: a garment shot is being looked at, and a white surround
   competes with it. This is the one place on the site that is not white, and
   it is deliberate.
--------------------------------------------------------------------------- */
.pp-lb {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .94);
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease;
}
.pp-lb.on { opacity: 1; pointer-events: auto; }

.pp-lb img {
	max-width: 92vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	display: block;
	cursor: zoom-in;
	user-select: none;
}

.pp-lb .pp-lb-x,
.pp-lb .pp-lb-nav {
	position: absolute;
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
	line-height: 1;
	padding: 10px 14px;
	font-weight: 300;
}

.pp-lb .pp-lb-x { top: 10px; right: 14px; font-size: 30px; }
.pp-lb .pp-lb-nav { top: 50%; transform: translateY(-50%); font-size: 44px; }
.pp-lb .pp-lb-prev { left: 4px; }
.pp-lb .pp-lb-next { right: 4px; }

.pp-lb .pp-lb-x:hover,
.pp-lb .pp-lb-nav:hover { opacity: .65; }

.pp-lb .pp-lb-n {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .75);
	font-size: 11px;
	letter-spacing: .2em;
}

/* On a phone the arrows sit over the picture, so they are smaller and the
   swipe does the real work. */
@media (max-width: 600px) {
	.pp-lb .pp-lb-nav { font-size: 32px; }
	.pp-lb img { max-width: 100vw; max-height: 86vh; }
}

@media (prefers-reduced-motion: reduce) { .pp-lb { transition: none; } }

/* ---------------------------------------------------------------------------
   A GRID WITH ONLY ONE OR TWO PIECES
   inc/handbags.php. Her report 2026-10-16: the lone bag was a thumbnail.

   Three columns suit a season of fourteen. They do not suit a page with one
   piece on it, where the photograph IS the page. So a short grid widens:
   one across on a phone, two on a wide screen — never three, because a single
   tile stranded in the left third reads as a mistake.
--------------------------------------------------------------------------- */
.grid--few { grid-template-columns: repeat(2, 1fr); }
.grid--few .tile:nth-child(3n) { border-right: 1px solid var(--hair); }
.grid--few .tile:nth-child(2n) { border-right: 0; }

/* The photograph gets its natural shape rather than being letterboxed inside a
   3:4 portrait box — a bag is wider than a dress. */
.grid--few .tile .shot { aspect-ratio: 4 / 3; }

@media (max-width: 760px) {
	.grid--few { grid-template-columns: 1fr; }
	.grid--few .tile { border-right: 0; }
	.grid--few .tile .shot { aspect-ratio: 1 / 1; }
	.grid--few .tile .cap { padding: 16px 16px 24px; }
	.grid--few .tile .name { font-size: 14px; }
	.grid--few .tile .price { font-size: 13px; }
}