/* phlo storefront
   Mobile first: the audience arrives from Instagram on a phone, so the single
   column is the real layout and the desktop rail is the enhancement. */

.phlo-shop{
  --ink:#20261f; --green:#34402f; --lime:#c7f24b; --mist:#f6f7f4;
  --line:#e2e7dd; --quiet:#6b7764;
  color:var(--ink); background:var(--mist); min-height:60vh;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.phlo-shop-wrap{max-width:1320px;margin:0 auto;padding:22px 16px 90px}
.phlo-shop-eyebrow{display:block;font-size:11px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--quiet);margin-bottom:6px}

.phlo-shop-hero{padding:14px 0 6px}
.phlo-shop-hero h1{font-size:clamp(28px,5.5vw,46px);line-height:1.03;letter-spacing:-.035em;margin:0}

/* ---- bar: count + tools ---- */
.phlo-shop-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding:16px 0 14px;border-bottom:1px solid var(--line);margin-bottom:20px}
.phlo-shop-count{font-size:17px;margin:0;font-weight:700;letter-spacing:-.01em}
.phlo-shop-bar-tools{display:flex;align-items:center;gap:10px}
.phlo-shop-sort{font-size:13px;color:var(--quiet);display:flex;align-items:center;gap:7px}
.phlo-shop-sort select{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink)}

/* ---- layout ---- */
.phlo-shop-layout{display:grid;gap:26px;grid-template-columns:1fr}
/* Hiding the rail is not a desktop-only idea - on a phone the filters are
   the whole first screen, so Show Filters matters more there, not less. This
   rule used to sit inside the 900px query, which left the button changing its
   own label and nothing else below that width. */
.phlo-shop-layout.is-railoff .phlo-shop-rail{display:none}
@media(min-width:900px){
  .phlo-shop-layout{grid-template-columns:208px minmax(0,1fr);gap:34px;align-items:start}
  .phlo-shop-layout.is-railoff{grid-template-columns:minmax(0,1fr)}
}

/* ---- filter rail ---- */
.phlo-shop-rail{position:sticky;top:14px}
.phlo-shop-rail[hidden]{display:none}
.phlo-shop-facet{margin:0 0 22px}
.phlo-shop-facet h3{font-size:13px;margin:0 0 9px;letter-spacing:-.01em}
.phlo-shop-facet ul{list-style:none;margin:0;padding:0}
.phlo-shop-facet li{margin:0 0 5px}
.phlo-shop-facet label{display:flex;align-items:center;gap:8px;font-size:13.5px;
  color:var(--quiet);cursor:pointer;padding:3px 0}
.phlo-shop-facet label:hover{color:var(--ink)}
.phlo-shop-facet input{accent-color:#34402f;width:15px;height:15px;cursor:pointer}
.phlo-shop-facet .is-sizes{display:flex;flex-wrap:wrap;gap:6px}
.phlo-shop-facet .is-sizes li{margin:0}
.phlo-shop-facet .is-sizes label{border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:6px 11px;font-weight:700;color:var(--ink);font-size:13px}
.phlo-shop-dot{width:15px;height:15px;border-radius:999px;display:inline-block;
  border:1px solid rgba(0,0,0,.2);flex:0 0 auto}
.phlo-shop-dot.is-lg{width:100%;height:100%;border-radius:8px}

/* ---- grid ---- */
.phlo-shop-grid{display:grid;gap:18px 16px;grid-template-columns:repeat(2,1fr)}
@media(min-width:720px){.phlo-shop-grid{grid-template-columns:repeat(3,1fr)}}
.phlo-shop-card[hidden]{display:none}

.phlo-shop-shot{display:block;position:relative;aspect-ratio:4/5;border-radius:10px;
  overflow:hidden;background:#eceee8}
.phlo-shop-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.phlo-shop-shot .is-back{opacity:0;transition:opacity .25s ease}
@media(hover:hover){
  .phlo-shop-shot:hover .is-back{opacity:1}
}

.phlo-shop-ways{display:flex;gap:6px;list-style:none;margin:9px 0 0;padding:0}
.phlo-shop-ways li{width:34px;height:42px}
.phlo-shop-ways a{display:block;width:100%;height:100%;border-radius:5px;overflow:hidden;
  border:1px solid var(--line);background:#fff}
.phlo-shop-ways a:hover{border-color:var(--ink)}
.phlo-shop-ways img{width:100%;height:100%;object-fit:cover;display:block}

.phlo-shop-name{display:block;margin:10px 0 2px;font-weight:700;font-size:15px;
  color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.phlo-shop-name:hover{text-decoration:underline}
.phlo-shop-cat{margin:0 0 5px;font-size:13.5px;color:var(--quiet)}
.phlo-shop-price{margin:0;font-size:14px;font-weight:700}
.phlo-shop-price.is-lg{font-size:19px;margin:10px 0 0}
.phlo-shop-price.is-pending{color:var(--quiet);font-weight:600;font-style:italic;font-size:13.5px}

.phlo-shop-empty{color:var(--quiet);margin:28px 0;text-align:center}

/* ---- buttons ---- */
.phlo-shop-btn{display:inline-block;text-align:center;text-decoration:none;cursor:pointer;
  padding:12px 20px;border-radius:8px;border:1.5px solid var(--green);background:#fff;
  color:var(--green);font:inherit;font-size:14px;font-weight:700}
.phlo-shop-btn:hover{background:var(--green);color:#fff}
.phlo-shop-btn.is-primary{background:var(--ink);border-color:var(--ink);color:#fff}
.phlo-shop-btn.is-primary:hover{background:#000;border-color:#000}
.phlo-shop-btn.is-quiet{border-color:var(--line);color:var(--ink)}
.phlo-shop-btn.is-quiet:hover{background:#fff;border-color:var(--ink)}
.phlo-shop-btn.is-block{display:block;width:100%}
.phlo-shop-btn.is-pill{border-radius:999px;padding:15px 20px}
.phlo-shop-btn.is-sm{padding:7px 13px;font-size:13px}
.phlo-shop-btn[disabled]{opacity:.45;cursor:not-allowed}
.phlo-shop-btn.is-on{background:var(--lime);border-color:var(--lime);color:var(--ink)}

.phlo-shop-sets{margin:52px 0 0;padding:28px;border-radius:14px;background:var(--green);color:#fff}
.phlo-shop-sets h2{margin:0 0 8px;font-size:23px}
.phlo-shop-sets p{margin:0 0 18px;opacity:.85;max-width:52ch}
.phlo-shop-sets .phlo-shop-btn{background:var(--lime);border-color:var(--lime);color:var(--ink)}

/* ---- product page ---- */
.phlo-shop-crumbs{font-size:13px;color:var(--quiet);margin:0 0 16px}
.phlo-shop-crumbs a{color:var(--quiet)}
.phlo-shop-crumbs span{margin:0 6px}

.phlo-shop-detail{display:grid;gap:26px}
@media(min-width:900px){
  .phlo-shop-detail{grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr);gap:48px;align-items:start}
  .phlo-shop-buy{position:sticky;top:20px}
}

.phlo-shop-gallery{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:700px){.phlo-shop-gallery{grid-template-columns:76px minmax(0,1fr)}}

.phlo-shop-rail-thumbs{list-style:none;margin:0;padding:0;display:flex;gap:9px;
  flex-direction:row;overflow-x:auto}
@media(min-width:700px){.phlo-shop-rail-thumbs{flex-direction:column;overflow:visible}}
.phlo-shop-rail-thumbs button{width:66px;height:82px;border-radius:7px;overflow:hidden;padding:0;
  cursor:pointer;border:1.5px solid var(--line);background:#fff;flex:0 0 auto;position:relative}
.phlo-shop-rail-thumbs button[aria-pressed="true"]{border-color:var(--ink)}
.phlo-shop-rail-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

.phlo-shop-stage{position:relative;aspect-ratio:4/5;border-radius:12px;overflow:hidden;
  background:#eceee8}
.phlo-shop-stage img{width:100%;height:100%;object-fit:cover;display:block}
.phlo-shop-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
  border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.92);
  font-size:21px;line-height:1;cursor:pointer;color:var(--ink)}
.phlo-shop-arrow.is-prev{left:10px}
.phlo-shop-arrow.is-next{right:10px}
.phlo-shop-arrow:hover{background:#fff;border-color:var(--ink)}

.phlo-shop-buy h1{font-size:clamp(24px,4vw,34px);margin:0 0 4px;letter-spacing:-.03em}
.phlo-shop-short{color:var(--quiet);margin:14px 0 0;font-size:14.5px}

.phlo-shop-field{border:0;padding:0;margin:26px 0 0}
.phlo-shop-field legend{padding:0;font-size:13px;font-weight:700;color:var(--quiet);margin-bottom:10px;width:100%}
.phlo-shop-field legend strong{color:var(--ink)}
.phlo-shop-legend-row{display:flex;align-items:center;justify-content:space-between}
.phlo-shop-link{border:0;background:none;padding:0;font:inherit;font-size:13px;font-weight:700;
  color:var(--ink);text-decoration:underline;cursor:pointer}

.phlo-shop-colours{display:flex;gap:9px;flex-wrap:wrap}
.phlo-shop-colours button{width:52px;height:64px;border-radius:7px;cursor:pointer;padding:0;
  overflow:hidden;border:1.5px solid var(--line);background:#fff}
.phlo-shop-colours button[aria-pressed="true"]{border-color:var(--ink);border-width:2px}
.phlo-shop-colours img{width:100%;height:100%;object-fit:cover;display:block}
.phlo-shop-colours .sw{display:block;width:100%;height:100%}

.phlo-shop-sizes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.phlo-shop-sizes button{padding:14px 10px;border-radius:7px;cursor:pointer;border:1px solid var(--line);
  background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--ink);text-align:center}
.phlo-shop-sizes button:hover:not([disabled]){border-color:var(--ink)}
.phlo-shop-sizes button[aria-pressed="true"]{border-color:var(--ink);border-width:2px;font-weight:800}
.phlo-shop-sizes button[disabled]{color:#aab3a4;cursor:not-allowed;text-decoration:line-through;background:#fafbf9}

.phlo-shop-hint{font-size:12.5px;color:var(--quiet);margin:10px 0 0}
.phlo-shop-buy .phlo-shop-btn.is-block{margin-top:12px}
.phlo-shop-buy .phlo-shop-btn.is-primary{margin-top:26px}
.phlo-shop-more{margin:26px 0 0;border-top:1px solid var(--line);padding-top:14px}
.phlo-shop-more summary{cursor:pointer;font-weight:700;font-size:14px}

/* ---- bag button + modals ---- */
.phlo-shop-bagbtn{position:fixed;right:16px;bottom:16px;z-index:40;cursor:pointer;
  padding:13px 20px;border-radius:999px;border:0;background:var(--ink);color:#fff;
  font:inherit;font-weight:700;box-shadow:0 10px 28px rgba(0,0,0,.24)}
.phlo-shop-badge{display:inline-block;min-width:22px;margin-left:8px;padding:1px 6px;
  border-radius:999px;background:var(--lime);color:var(--ink);font-size:12px}

.phlo-shop-modal{position:fixed;inset:0;z-index:60;background:rgba(16,20,15,.5);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#20261f}
.phlo-shop-modal[hidden]{display:none}
.phlo-shop-modal-panel{position:absolute;background:#fff;overflow:auto;padding:20px}
.phlo-shop-modal.is-drawer .phlo-shop-modal-panel{right:0;top:0;bottom:0;width:min(440px,100%)}
.phlo-shop-modal:not(.is-drawer) .phlo-shop-modal-panel{
  left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));
  max-height:82vh;border-radius:14px}
.phlo-shop-modal-panel header{display:flex;align-items:center;justify-content:space-between}
.phlo-shop-modal-panel h2{margin:0;font-size:20px}
.phlo-shop-x{border:0;background:none;font-size:30px;line-height:1;cursor:pointer;color:#20261f}

.phlo-shop-table{width:100%;border-collapse:collapse;margin:16px 0 0;font-size:14px}
.phlo-shop-table th,.phlo-shop-table td{border:1px solid #e2e7dd;padding:9px 11px;text-align:left}
.phlo-shop-table th{background:#f1f4ee;font-size:12px;text-transform:uppercase;letter-spacing:.04em}

.phlo-shop-lines{list-style:none;margin:18px 0 0;padding:0}
.phlo-shop-lines li{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid #e2e7dd}
.phlo-shop-lines img{width:62px;height:78px;object-fit:cover;border-radius:7px;display:block}
.phlo-shop-lines strong{display:block;font-size:14px}
.phlo-shop-lines small{color:#6b7764;font-size:12px}
.phlo-shop-qty{display:flex;align-items:center;gap:8px;margin-top:6px}
.phlo-shop-qty button{width:26px;height:26px;border-radius:6px;border:1px solid #e2e7dd;
  background:#fff;cursor:pointer;font:inherit;line-height:1}
.phlo-shop-drop{border:0;background:none;color:#6b7764;font-size:12px;cursor:pointer;text-decoration:underline}

.phlo-shop-checkout{margin:20px 0 0;display:grid;gap:12px}
.phlo-shop-checkout label{display:grid;gap:6px;font-size:13px;font-weight:700}
.phlo-shop-checkout input[type=text],.phlo-shop-checkout input[type=tel],
.phlo-shop-checkout input[type=email],.phlo-shop-checkout input:not([type]),
.phlo-shop-checkout select{width:100%;padding:11px 12px;border:1px solid #e2e7dd;border-radius:8px;
  font:inherit;font-weight:400;background:#f8faf6}
.phlo-shop-check{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important;font-size:12px}
.phlo-shop-check input{margin-top:2px}
.phlo-shop-error{background:#fdecec;border:1px solid #f3c2c2;color:#8a1f1f;padding:10px 12px;
  border-radius:8px;font-size:13px;margin:0}
.phlo-shop-done h3{margin:24px 0 8px}

/* ===================== hero ===================== */
.phlo-hero{
  position:relative;height:clamp(420px,62vh,660px);overflow:hidden;
  background:var(--ink);margin-bottom:34px;
}
.phlo-hero-frames{position:absolute;inset:0}
.phlo-hero-frame{
  position:absolute;inset:0;background-size:cover;background-position:center 22%;
  opacity:0;transition:opacity 1.1s ease;
}
.phlo-hero-frame.is-on{opacity:1}
.phlo-hero-shade{
  position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(32,38,31,.88) 0%,rgba(32,38,31,.55) 42%,rgba(32,38,31,.06) 78%);
}
.phlo-hero-say{
  position:relative;z-index:2;max-width:1320px;margin:0 auto;height:100%;
  display:flex;flex-direction:column;justify-content:center;padding:0 16px;color:#fff;
}
.phlo-hero-eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--lime);margin-bottom:12px;
}
/* The headline is a sentence now, not three words, so it is set smaller and
   allowed to run wider - at the old 72px/14ch it stacked into a narrow tower
   that pushed the button off a laptop screen. Bold is explicit: the theme
   gives h1 a book weight, which is what "Built to move in." wanted and this
   line does not. */
.phlo-hero-say h1{
  font-size:clamp(27px,4.1vw,50px);line-height:1.06;letter-spacing:-.025em;
  font-weight:700;margin:0 0 14px;max-width:21ch;
}
.phlo-hero-say p{font-size:clamp(14px,1.6vw,18px);max-width:40ch;margin:0 0 24px;opacity:.9;line-height:1.45}
.phlo-hero-say .phlo-shop-btn{align-self:flex-start;background:var(--lime);border-color:var(--lime);color:var(--ink)}
.phlo-hero-say .phlo-shop-btn:hover{background:#fff;border-color:#fff}
.phlo-hero-dots{position:absolute;left:0;right:0;bottom:20px;z-index:3;display:flex;gap:9px;justify-content:center}
.phlo-hero-dots button{
  width:34px;height:4px;border:0;border-radius:3px;cursor:pointer;padding:0;
  background:rgba(255,255,255,.4);
}
.phlo-hero-dots button[aria-pressed="true"]{background:var(--lime)}

/* ============ pre-order flag on a card ============ */
.phlo-shop-flag{
  position:absolute;top:10px;left:10px;z-index:2;
  background:var(--lime);color:var(--ink);font-size:10.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
}

/* ============ sidebar image panels ============ */
.phlo-shop-promo{
  margin:26px 0 0;border-radius:12px;overflow:hidden;position:relative;
  background:var(--ink);
}
.phlo-shop-promo img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.phlo-shop-promo.is-tall img{aspect-ratio:1/1}
.phlo-shop-promo figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 14px 13px;color:#fff;
  background:linear-gradient(to top,rgba(32,38,31,.94),rgba(32,38,31,0));
}
.phlo-shop-promo figcaption strong{display:block;font-size:14px;letter-spacing:-.01em}
.phlo-shop-promo figcaption span{display:block;font-size:12px;opacity:.82;margin-top:2px;line-height:1.35}

/* ============ pre-order reassurance ============ */
.phlo-shop-reassure{
  margin:20px 0 0;padding:13px 15px;border-radius:10px;
  background:#f1f5ec;border:1px solid var(--line);
  font-size:13px;line-height:1.5;color:var(--quiet);
}
.phlo-shop-reassure strong{color:var(--ink)}

/* ============ no photography yet ============
   The shop is fully usable before the product photography is signed off.
   Instead of an empty frame, a card shows the colourways it comes in, which
   is real information rather than an apology. */
.phlo-shop-shot.is-blank{background:var(--mist);border:1px solid var(--line)}
.phlo-shop-swatchfield{
  position:absolute;inset:0;display:flex;flex-direction:column;
}
.phlo-shop-swatchfield i{flex:1;display:block}
.phlo-shop-swatchfield em{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;
  font-style:normal;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;text-align:center;
  background:linear-gradient(to top,rgba(32,38,31,.78),rgba(32,38,31,0));
}
/* the hero with no photography behind it */
.phlo-hero:has(.phlo-hero-frames:empty) .phlo-hero-shade{
  background:linear-gradient(100deg,rgba(32,38,31,.96),rgba(52,64,47,.9));
}
/* product page stage, before photography */
.phlo-shop-stage.is-blank{display:flex;flex-direction:column;border:1px solid var(--line)}
.phlo-shop-stage.is-blank img{display:none}
.phlo-shop-stage.is-blank .phlo-shop-arrow{display:none}
.phlo-shop-stage .phlo-blank-bands{position:absolute;inset:0;display:flex;flex-direction:column}
.phlo-shop-stage .phlo-blank-bands i{flex:1;display:block}
.phlo-shop-stage .phlo-blank-note{
  position:absolute;left:0;right:0;bottom:0;padding:44px 16px 18px;text-align:center;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(to top,rgba(32,38,31,.8),rgba(32,38,31,0));
}

/* ============ headings must win against the theme ============
   The Elementor kit sets a colour on every h1-h6 at the same specificity as
   a plain .class h1, and it loads after this file, so it wins on source
   order. The hero headline came out near-black on a near-black ground.
   Two classes deep beats it without reaching for !important. */
.phlo-shop .phlo-hero-say h1{color:#fff}
.phlo-shop .phlo-hero-say p{color:rgba(255,255,255,.92)}
.phlo-shop .phlo-shop-buy h1{color:var(--ink)}
.phlo-shop .phlo-shop-count{color:var(--ink)}
.phlo-shop .phlo-shop-facet h3{color:var(--ink)}
.phlo-shop .phlo-shop-sets h2{color:#fff}
.phlo-shop .phlo-shop-modal-panel h2,
.phlo-shop-modal .phlo-shop-modal-panel h2{color:var(--ink)}

/* ---- rail tiles when there is no photography yet ---- */
.phlo-shop-rail-thumbs button.is-swatch{
  border:1.5px solid var(--line);
}
.phlo-shop-rail-thumbs button.is-swatch[aria-pressed="true"]{
  border-color:var(--ink);border-width:2.5px;
}
.phlo-shop-rail-thumbs button.is-swatch:hover{border-color:var(--ink)}
/* the blank stage is now a single field, so the label needs room */
.phlo-shop-stage .phlo-blank-note{text-transform:none;letter-spacing:.04em;font-size:13px}

/* ===================== added to bag ===================== */
.phlo-added{
  position:fixed;top:0;right:0;z-index:70;padding:14px;
  width:min(420px,100%);pointer-events:none;
}
.phlo-added[hidden]{display:none}
.phlo-added-panel{
  background:#fff;border-radius:14px;padding:18px;pointer-events:auto;
  box-shadow:0 24px 60px rgba(32,38,31,.22);border:1px solid var(--line);
  transform:translateY(-12px);opacity:0;transition:transform .26s ease,opacity .26s ease;
}
.phlo-added.is-on .phlo-added-panel{transform:none;opacity:1}
.phlo-added-panel header{display:flex;align-items:center;gap:10px;margin-bottom:15px}
.phlo-added-panel header strong{font-size:16px;letter-spacing:-.01em;flex:1}
.phlo-added-tick{
  width:24px;height:24px;border-radius:50%;background:#2f7a3f;color:#fff;
  display:grid;place-items:center;font-size:13px;flex:none;
}
.phlo-added-item{display:flex;gap:13px;margin-bottom:16px}
.phlo-added-thumb{
  width:76px;height:95px;border-radius:8px;flex:none;background:#eceee8;
  background-size:cover;background-position:center;border:1px solid var(--line);
}
.phlo-added-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.phlo-added-meta strong{font-size:14.5px;letter-spacing:-.01em}
.phlo-added-meta small{font-size:12.5px;color:var(--quiet)}
.phlo-added-meta span{font-size:13px;font-style:italic;color:var(--quiet);margin-top:auto}
.phlo-added-panel .phlo-shop-btn{margin-top:9px}

/* ===================== the bag page ===================== */
.phlo-bag-title{font-size:clamp(28px,4.4vw,42px);letter-spacing:-.035em;margin:0 0 22px}
.phlo-shop .phlo-bag-title{color:var(--ink)}
.phlo-bag-grid{display:grid;gap:34px;grid-template-columns:1fr}
@media(min-width:900px){
  .phlo-bag-grid{grid-template-columns:minmax(0,1fr) 380px;gap:52px;align-items:start}
  .phlo-bag-summary{position:sticky;top:20px}
}
.phlo-bag-items .phlo-shop-lines{margin:0}
.phlo-bag-items .phlo-shop-lines li{
  grid-template-columns:96px 1fr auto;padding:18px 0;
}
.phlo-bag-items .phlo-shop-lines img{width:96px;height:120px}
.phlo-bag-blank{color:var(--quiet);margin:0;padding:26px 0;font-size:15px}
.phlo-bag-blank a{color:var(--ink);font-weight:700;margin-left:6px}

.phlo-bag-summary{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px}
.phlo-shop .phlo-bag-summary h2{font-size:20px;margin:0 0 16px;letter-spacing:-.02em;color:var(--ink)}
.phlo-bag-money{display:grid;grid-template-columns:1fr auto;gap:11px 14px;margin:0 0 20px;font-size:14px}
.phlo-bag-money dt{color:var(--quiet)}
.phlo-bag-money dd{margin:0;text-align:right;font-style:italic;color:var(--quiet)}
.phlo-bag-money dt.is-total,.phlo-bag-money dd.is-total{
  border-top:1px solid var(--line);padding-top:12px;font-weight:800;font-style:normal;color:var(--ink);
}
.phlo-bag-summary .phlo-shop-checkout{margin-top:0}

/* a bag line before the photography exists */
.phlo-line-swatch{
  display:block;border-radius:7px;border:1px solid var(--line);
  width:62px;height:78px;flex:none;
}
.phlo-bag-items .phlo-line-swatch{width:96px;height:120px}

/* While a colourway is being previewed on a card, the hover-swap second
   image must stay out of the way. */
.phlo-shop-card.is-previewing .phlo-shop-shot .is-back{opacity:0}
.phlo-shop-ways a:hover,.phlo-shop-ways a:focus-visible{border-color:var(--ink)}

/* ============ clear the theme's fixed header ============
   The theme floats a mini-cart link and a burger over the top-left and
   top-right of every page. The product and bag pages began at y=27, which
   put the breadcrumb underneath the cart icon: the link was correct but the
   click landed on the cart, so "Shop" appeared dead. The listing escapes
   this because the hero is full-bleed.

   Push those pages below the header furniture, and lift the breadcrumb onto
   its own layer so nothing can sit over it again. */
.phlo-shop-product,
.phlo-bag{padding-top:84px}
@media(min-width:900px){
  .phlo-shop-product,
  .phlo-bag{padding-top:96px}
}
.phlo-shop-crumbs{position:relative;z-index:5;display:inline-flex;align-items:center;gap:2px}
.phlo-shop-crumbs a{
  position:relative;z-index:6;padding:6px 2px;text-decoration:none;
  border-bottom:1px solid transparent;
}
.phlo-shop-crumbs a:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* The result count is hidden, so the tools keep to the right on their own. */
.phlo-shop-count[hidden]{display:none}
.phlo-shop-bar-tools{margin-left:auto}

/* Colour filter: swatches, no words -----------------------------------------
   The colourway names are in-house, so the rail shows the colours themselves.
   Each swatch keeps a word for assistive technology and as a tooltip, held
   off-screen rather than hidden with display:none, which would take it out of
   the accessibility tree along with the label. */
.phlo-shop-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.phlo-shop-facet ul.is-swatches{display:flex;flex-wrap:wrap;gap:10px;padding:2px 0 4px}
.phlo-shop-facet ul.is-swatches li{margin:0}
.phlo-shop-facet ul.is-swatches label{gap:0;cursor:pointer;padding:3px;border-radius:999px;
  border:1.5px solid transparent;line-height:0}
.phlo-shop-facet ul.is-swatches input{position:absolute;opacity:0;width:0;height:0}
.phlo-shop-facet ul.is-swatches .phlo-shop-dot{width:24px;height:24px}
.phlo-shop-facet ul.is-swatches label:hover{border-color:#c9c9c9}
/* :has is what marks the chosen swatch; the script toggles nothing here. */
.phlo-shop-facet ul.is-swatches label:has(input:checked){border-color:var(--ink,#111)}
.phlo-shop-facet ul.is-swatches label:has(input:focus-visible){outline:2px solid #1565ff;outline-offset:2px}

/* Size buttons carry both ranges ------------------------------------------
   "S" on its own line, "UK 8-10 · US 4-6" under it. One line would overflow
   the two-column grid on a phone, which is where most of this traffic is.
   font-weight stays inherited so the chosen button still bolds as a whole,
   and the sold-out strike-through still crosses both lines. */
.phlo-shop-sizes button{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;padding:11px 8px;line-height:1.2}
.phlo-shop-sizes button b{font-weight:inherit;font-size:14.5px}
.phlo-shop-sizes button i{font-style:normal;font-weight:500;font-size:11.5px;
  letter-spacing:.005em;opacity:.6;white-space:nowrap}
.phlo-shop-sizes button[aria-pressed="true"] i{opacity:.75}

/* The colourway a touch shopper has tapped on a card. There is no hover to
   show it with, so the thumbnail carries the mark itself. */
.phlo-shop-ways a[aria-current="true"]{border-color:var(--ink);border-width:2px}

/* The second line is deliberately not bold - it carries the detail under the
   offer, and the contrast between the two is the point. */
.phlo-shop .phlo-hero-say p{font-weight:400}

/* Side picture carousel -----------------------------------------------------
   One frame at a time, sliding. The arrows only appear under a mouse; on a
   touch screen there is no hover to reveal them with, so they stay visible
   and the panel can also be swiped. */
.phlo-promo{position:relative;overflow:hidden;border-radius:10px;background:#ecefe9;margin-top:2px}
.phlo-promo-track{display:flex;will-change:transform;
  transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.phlo-promo-slide{flex:0 0 100%;min-width:0;margin:0}
.phlo-promo-slide img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.phlo-promo-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:32px;height:32px;padding:0;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.9);color:#111;font-size:19px;line-height:1;
  display:grid;place-items:center;opacity:0;transition:opacity .18s}
.phlo-promo-nav.is-prev{left:8px}
.phlo-promo-nav.is-next{right:8px}
.phlo-promo:hover .phlo-promo-nav,.phlo-promo-nav:focus-visible{opacity:1}
@media(hover:none){.phlo-promo-nav{opacity:.92}}
.phlo-promo-dots{position:absolute;left:0;right:0;bottom:10px;z-index:2;
  display:flex;justify-content:center;gap:6px}
.phlo-promo-dots button{width:7px;height:7px;padding:0;border:0;border-radius:999px;
  cursor:pointer;background:rgba(255,255,255,.55);transition:width .25s,background .25s}
.phlo-promo-dots button[aria-current="true"]{width:18px;background:#fff}
@media(prefers-reduced-motion:reduce){.phlo-promo-track{transition:none}}

/* Pre-order price beside the full price ------------------------------------
   The full price is struck through and set back, so the number a shopper
   actually pays stays the one their eye lands on first. */
.phlo-shop-price s{
  text-decoration:line-through; color:var(--quiet); font-weight:500;
  font-size:.86em; margin-right:7px; text-decoration-thickness:1px;
}
.phlo-shop-price.is-lg s{font-size:.62em;margin-right:10px}
.phlo-line-price{display:block;font-size:13px;font-weight:600;margin-top:3px}
.phlo-line-price s{
  text-decoration:line-through;color:var(--quiet);font-weight:500;
  font-size:.88em;margin-right:6px;
}
.phlo-bag-money #bag-subtotal s{
  text-decoration:line-through;color:var(--quiet);font-weight:500;
  font-size:.88em;margin-right:6px;
}
.phlo-bag-saved{
  margin:8px 0 0;padding:7px 11px;border-radius:7px;
  background:var(--lime);color:var(--ink);
  font-size:12.5px;font-weight:700;letter-spacing:-.01em;text-align:center;
}
.phlo-bag-saved[hidden]{display:none}

/* The theme's WooCommerce basket, on shop pages only ------------------------
   The header carries a WooCommerce mini-cart. This store does not use the
   WooCommerce cart, so it can only ever say "No products in the cart" while
   our own Bag sits in the corner with the real contents - two baskets, one of
   them permanently empty. Hidden here rather than removed from the header, so
   the rest of the site is untouched. */
body.phlo-shop-page .mini-cart,
body.phlo-shop-page .widget_shopping_cart{display:none !important}

/* Added to Bag rises from the Bag button ------------------------------------
   It used to be pinned to the top-right corner, where on a wide screen the
   product column is - so it covered the name of the very thing just added.
   It now sits directly above the Bag button it is telling you about, over
   empty space at every width, and slides up rather than down to match. */
.phlo-added{
  top:auto;bottom:84px;right:0;padding:0 16px;
  width:min(400px,100%);
}
.phlo-added-panel{transform:translateY(14px)}
.phlo-added.is-on .phlo-added-panel{transform:none}
@media(max-width:700px){.phlo-added{bottom:78px;padding:0 12px}}

/* Coming back from the payment page ---------------------------------------- */
.phlo-pay-note{
  border-radius:10px;padding:13px 16px;margin:0 0 18px;font-size:14px;line-height:1.5;
  border:1px solid var(--line);background:#f5f7f2;
}
.phlo-pay-note.is-good{background:#eef7ea;border-color:#bcdcae}
.phlo-pay-note.is-bad{background:#fbf2ef;border-color:#e3c3b8}


/* Quantity, chosen before adding -------------------------------------------- */
.phlo-shop-qtyrow{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0 0 14px;
}
.phlo-shop-qtyrow > span{font-size:14px;font-weight:600;letter-spacing:-.01em}
.phlo-shop-qtyrow .phlo-shop-qty{margin:0}

/* The floating Bag button --------------------------------------------------
   The theme resets backgrounds on links, which left this one transparent with
   white text on a pale page - invisible. Stated with !important and in the
   brand lime, which reads at a glance against the stone background. */
.phlo-shop-bagbtn{
  background:#c7f24b !important;
  color:#20261f !important;
  border:1px solid rgba(32,38,31,.14) !important;
  box-shadow:0 10px 30px rgba(32,38,31,.28) !important;
}
.phlo-shop-bagbtn:hover{background:#b9e83a !important}
.phlo-shop-bagbtn .phlo-shop-badge{
  background:#20261f !important;
  color:#fff !important;
}


/* Shipping address, captured in parts ---------------------------------------
   Placeholders carry the wording on screen; the labels stay in the markup for
   screen readers, because a placeholder alone leaves them with nothing. */
.phlo-shop-addr{border:0;padding:0;margin:0 0 4px}
.phlo-shop-addr{margin-top:18px}
.phlo-shop-addr legend{
  padding:0;margin:0 0 12px;
  font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:8px;width:100%;
}
/* Labels are visible, as they should have been from the start.
   The previous rule hid "> :first-child" meaning to hide the label text - but
   a bare text node is not an element, so :first-child matched the input and
   hid the field itself, leaving a label with nothing under it. */
.phlo-shop-addr label.is-sr{
  display:block;margin:0 0 12px;
  font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
}
.phlo-shop-addr label.is-sr input,
.phlo-shop-addr label.is-sr select{
  display:block;width:100%;margin-top:5px;font-weight:400;
}
.phlo-shop-addr input,
.phlo-shop-addr select{width:100%}


/* Guest or account ---------------------------------------------------------- */
.phlo-shop-acct{
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:0 0 14px;
  background:#f7f8f4;
}
.phlo-shop-acct .phlo-shop-check{margin:0 0 6px}
.phlo-shop-acct .phlo-shop-check:last-of-type{margin-bottom:0}
#shop-acct-pass{margin-top:10px}
#shop-acct-pass[hidden]{display:none}
.phlo-shop-signedin{
  margin:0 0 14px;padding:10px 14px;border-radius:10px;
  background:#eef7ea;border:1px solid #bcdcae;font-size:13.5px;
}

/* "optional" sits quietly beside its label rather than in the placeholder,
   which disappears the moment someone starts typing. */
.phlo-shop-addr label.is-sr > span{
  font-weight:400;color:var(--quiet);font-size:12px;
}


/* My orders ----------------------------------------------------------------- */
.phlo-orders{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px}
.phlo-order{
  border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:#fff;
}
.phlo-order-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px;
}
.phlo-order-head strong{font-size:15px;letter-spacing:-.01em}
.phlo-order-head span{color:var(--quiet);font-size:13px}
.phlo-order-chip{
  margin-left:auto;padding:3px 10px;border-radius:999px;
  background:#f1f3ee;color:var(--ink) !important;font-size:12px;font-weight:600;
}
.phlo-order-chip.is-paid{background:#eef7ea;border:1px solid #bcdcae}
.phlo-order-items{list-style:none;margin:0 0 10px;padding:0;font-size:14px}
.phlo-order-items li{margin:0 0 3px;color:var(--ink)}
.phlo-order-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px}
.phlo-order-foot code{font-size:12.5px;background:#f1f3ee;padding:2px 6px;border-radius:4px}
@media(max-width:600px){.phlo-order-chip{margin-left:0}}


/* My orders ----------------------------------------------------------------- */
.phlo-orders{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:14px}
.phlo-order{
  border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:#fff;
}
.phlo-order-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:10px;
}
.phlo-order-head strong{font-size:15px;letter-spacing:-.01em}
.phlo-order-head span{color:var(--quiet);font-size:13px}
.phlo-order-chip{
  margin-left:auto;padding:3px 10px;border-radius:999px;
  background:#f1f3ee;color:var(--ink) !important;font-size:12px;font-weight:600;
}
.phlo-order-chip.is-paid{background:#eef7ea;border:1px solid #bcdcae}
.phlo-order-items{list-style:none;margin:0 0 10px;padding:0;font-size:14px}
.phlo-order-items li{margin:0 0 3px;color:var(--ink)}
.phlo-order-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:14px}
.phlo-order-foot code{font-size:12.5px;background:#f1f3ee;padding:2px 6px;border-radius:4px}
@media(max-width:600px){.phlo-order-chip{margin-left:0}}


/* The floating bag is an icon now, so it wants to be round rather than a pill
   with a word in it. */
.phlo-shop-bagbtn{
  display:inline-flex;align-items:center;gap:7px;
  padding:12px 15px !important;
}
.phlo-shop-bagbtn svg{display:block;flex:none}
.phlo-shop-bagbtn .phlo-shop-badge{
  min-width:21px;margin-left:0 !important;
  display:inline-grid;place-items:center;
  font-size:11.5px;line-height:1;padding:4px 6px;
}

/* Tracking -------------------------------------------------------------- */
.phlo-track-form{display:flex;gap:10px;align-items:flex-end;margin:0 0 6px;flex-wrap:wrap}
.phlo-track-form label.is-sr{flex:1 1 240px;margin:0;font-size:13px;font-weight:600}
.phlo-track-form input{width:100%;margin-top:5px}
.phlo-track-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin:16px 0 0;
}
.phlo-track-head .k{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--quiet)}
.phlo-track-head strong{font-size:17px;letter-spacing:-.01em}
.phlo-track-status{
  margin-left:auto;background:var(--lime);color:var(--ink);
  padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:700;
}
.phlo-track-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.phlo-track-list li{
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 14px;
  display:flex;flex-direction:column;gap:2px;
}
.phlo-track-list strong{font-size:14px}
.phlo-track-list span{font-size:13px;color:var(--quiet)}
.phlo-track-list small{font-size:12px;color:var(--quiet)}
@media(max-width:600px){.phlo-track-status{margin-left:0}}

.phlo-shop-crumbs .phlo-shop-trackme{
  margin-left:auto;font-weight:600;text-decoration:underline;
}
.phlo-shop-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap}


/* Fabric, Technology & Care ------------------------------------------------- */
.phlo-care h4{
  margin:16px 0 6px;font-size:13px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--ink);
}
.phlo-care h4:first-child{margin-top:4px}
.phlo-care p{margin:0 0 8px;font-size:14px;line-height:1.55}
.phlo-care ul{margin:0 0 10px;padding-left:18px}
.phlo-care li{margin:0 0 4px;font-size:14px;line-height:1.5}

/* Quantity, sized to be seen ------------------------------------------------ */
.phlo-shop-qtyrow.is-lg{
  border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:12px 16px;margin:0 0 14px;
}
.phlo-shop-qtyrow.is-lg > span{font-size:15px;font-weight:700}
.phlo-shop-qtyrow.is-lg .phlo-shop-qty{gap:0}
.phlo-shop-qtyrow.is-lg .phlo-shop-qty button{
  width:44px;height:44px;font-size:21px;line-height:1;border-radius:10px;
}
.phlo-shop-qtyrow.is-lg .phlo-shop-qty span{
  min-width:52px;text-align:center;font-size:17px;font-weight:700;
}

.phlo-shop-policies{
  margin:4px 0 14px;font-size:13px;line-height:1.5;color:var(--quiet);
}
.phlo-shop-policies a{color:var(--ink);font-weight:600;text-decoration:underline}
.phlo-shop-more{margin-top:14px}
.phlo-shop-more > summary{cursor:pointer;font-weight:700;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;padding:13px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.phlo-shop-more[open] > summary{border-bottom-color:transparent}


/* Policies at checkout ------------------------------------------------------ */
.phlo-shop-policy{border-bottom:1px solid var(--line)}
.phlo-shop-policy:first-of-type{border-top:1px solid var(--line)}
.phlo-shop-policy > summary{
  cursor:pointer;list-style:none;padding:11px 2px;font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:space-between;
}
.phlo-shop-policy > summary::-webkit-details-marker{display:none}
.phlo-shop-policy > summary::after{content:'+';font-weight:700;color:var(--quiet)}
.phlo-shop-policy[open] > summary::after{content:'\2212'}
.phlo-shop-policy > div{padding:0 2px 12px}
.phlo-shop-policy p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--quiet)}
.phlo-shop-policy a{font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:underline}
.phlo-shop-policies{margin:12px 0 14px;font-size:12.5px;color:var(--quiet)}

/* The delivery estimate sits with the charge it explains. */
.phlo-bag-money .phlo-bag-eta{
  font-size:11.5px;color:var(--quiet);padding-top:0;line-height:1.4;
}
.phlo-bag-money dt.phlo-bag-eta{visibility:hidden}

/* Fabric, Technology & Care, closed by default so a phone is not a mile long */
.phlo-shop-more{margin-top:14px}
.phlo-shop-more > summary{
  cursor:pointer;font-weight:700;font-size:12.5px;letter-spacing:.05em;
  text-transform:uppercase;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.phlo-shop-more[open] > summary{border-bottom-color:transparent}


/* The order review, shown before anything is placed ------------------------ */
.phlo-confirm-back{
  position:fixed;inset:0;z-index:99999;background:rgba(20,26,20,.55);
  display:flex;align-items:center;justify-content:center;padding:18px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.phlo-confirm{
  background:#fff;border-radius:16px;padding:22px;width:100%;max-width:440px;
  max-height:calc(100vh - 36px);overflow-y:auto;
  box-shadow:0 18px 50px rgba(20,26,20,.3);
  font-family:inherit;color:#20261f;
}
.phlo-confirm h2{margin:0 0 6px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.phlo-confirm-lead{margin:0 0 16px;font-size:12.5px;line-height:1.5;color:#6c7568}
.phlo-confirm-lines{list-style:none;margin:0 0 14px;padding:0}
.phlo-confirm-lines li{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 0;border-top:1px solid #e2e7dd;
}
.phlo-confirm-lines img,
.phlo-confirm-lines .phlo-line-swatch{
  width:56px;height:70px;flex:0 0 56px;border-radius:8px;
  object-fit:cover;background:#f1f3ee;display:block;
}
.phlo-confirm-lines strong{display:block;font-size:14px;margin-bottom:5px}
.phlo-confirm-lines dl,.phlo-confirm-facts{
  display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;
}
.phlo-confirm-lines dt,.phlo-confirm-facts dt{
  font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:#8a9285;
}
.phlo-confirm-lines dd,.phlo-confirm-facts dd{margin:0;font-size:12.5px;font-weight:600}
.phlo-confirm-facts{border-top:1px solid #e2e7dd;padding-top:13px;margin-bottom:18px}
.phlo-confirm-facts dd{font-weight:500;line-height:1.45}
.phlo-confirm-acts{display:flex;flex-direction:column;gap:9px}
.phlo-confirm-acts .phlo-shop-btn{width:100%;justify-content:center}

/* The chosen colour is the only signal now that nothing previews on hover. */
#shop-colours button[aria-pressed="true"],
.phlo-shop-thumbs button[aria-pressed="true"]{
  outline:2px solid #20261f;outline-offset:2px;
}
#shop-colours button,.phlo-shop-ways a{cursor:pointer}
.phlo-shop-ways a[aria-current="true"]{
  outline:2px solid #20261f;outline-offset:2px;border-radius:6px;
}

/* The dialog is appended to <body>, outside .phlo-shop, so none of the
   colour variables declared there reach it - which left "Yes, this is
   correct" as white text on a transparent background, i.e. invisible.
   Everything inside the dialog is therefore a literal colour. */
.phlo-confirm .phlo-shop-btn{
  border:1px solid #20261f;background:#fff;color:#20261f;
  font:700 14px/1 inherit;font-family:inherit;
  padding:15px 20px;border-radius:999px;cursor:pointer;
  text-align:center;display:block;
}
.phlo-confirm .phlo-shop-btn.is-primary{background:#20261f;border-color:#20261f;color:#fff}
.phlo-confirm .phlo-shop-btn.is-primary:hover{background:#000;border-color:#000}
.phlo-confirm .phlo-shop-btn:not(.is-primary):hover{background:#f6f7f4}

/* The summary labels were in a 1fr column next to an auto one, so a long
   value ("N42,900  N38,610") squeezed them until they broke mid-word -
   "Subto tal", "Delive ry" - on a phone. Size the labels to their content
   and let the value column take the slack instead. */
.phlo-bag-money{grid-template-columns:max-content 1fr}
.phlo-bag-money dt{white-space:nowrap}
.phlo-bag-money dd{overflow-wrap:anywhere}

/* Sets ---------------------------------------------------------------------- */
.phlo-shop-flag.is-set{background:#20261f;color:#fff}
.phlo-shop-setwhat{
  margin:2px 0 4px;font-size:12px;color:var(--quiet);line-height:1.35;
}
/* A set with no photography of its own shows the pieces it is made of. */
.phlo-shop-setgrid{
  position:absolute;inset:0;display:grid;gap:2px;padding:2px;
  grid-template-columns:repeat(2,1fr);background:#eef0ea;
}
.phlo-shop-setgrid img{width:100%;height:100%;object-fit:cover;display:block}
.phlo-shop-setgrid i{display:block;width:100%;height:100%}
.phlo-shop-setgrid > :only-child{grid-column:1/-1}

/* One block per piece on the set page. */
.phlo-set-slot{
  border:1px solid var(--line);border-radius:12px;
  padding:13px 14px 15px;margin:0 0 12px;
}
.phlo-set-slot legend{
  font-weight:800;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  padding:0 6px;
}
.phlo-set-chosen{margin:0 0 9px;font-size:13px;font-weight:600}
.phlo-set-chosen.is-waiting{color:var(--quiet);font-weight:500;font-style:italic}
.phlo-set-slot .phlo-shop-sizes{margin-top:9px}

/* The pieces listed under a set line in the bag and in the review. */
.phlo-line-piece{display:block;color:var(--quiet);font-size:12px;line-height:1.45}

/* The floating button names the action. The icon alone said "bag" to anyone
   who already knew what it meant and nothing to anyone who did not. */
.phlo-shop-bagbtn{display:inline-flex;align-items:center;gap:8px;line-height:1}
.phlo-shop-bagbtn-word{font-weight:700;font-size:14px;letter-spacing:.01em}
.phlo-shop-bagbtn .phlo-shop-badge{margin-left:0}

/* On a narrow phone the word plus the icon plus the count is a wide pill in
   the corner, so it tightens up rather than crowding the page. */
@media (max-width:420px){
  .phlo-shop-bagbtn{padding:11px 15px;gap:6px}
  .phlo-shop-bagbtn-word{font-size:13px}
}

/* The agreement sits above the button it refers to, with enough room that it
   reads as its own sentence rather than a caption on the policies. */
.phlo-shop-policies{margin:14px 0 12px}

/* Track your order ---------------------------------------------------------- */
.phlo-track-lead{max-width:48ch;margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--quiet)}
.phlo-track-lead strong{color:var(--ink)}
/* The lead is written in Settings and can run to more than one
   paragraph, so it is a block rather than a single <p>. */
.phlo-track-lead p{margin:0 0 10px}
.phlo-track-lead p:last-child{margin-bottom:0}

.phlo-track-form{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 6px}
.phlo-track-form input{
  flex:1 1 260px;min-width:0;padding:13px 15px;font:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);
}
.phlo-track-form input:focus{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--ink)}

/* The result panel */
.phlo-track-head{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  margin:22px 0 0;padding:16px 18px;background:#fff;
  border:1px solid var(--line);border-radius:14px 14px 0 0;border-bottom:0;
}
.phlo-track-head .k{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--quiet);
  flex:0 0 100%;
}
.phlo-track-head strong{font-size:17px;letter-spacing:.01em}
.phlo-track-status{
  margin-left:auto;background:#20261f;color:#fff;border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:700;
}

/* Four stages, so somebody can see at a glance how far along it is. */
.phlo-track-steps{
  list-style:none;display:flex;margin:0;padding:18px 18px 6px;
  background:#fff;border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.phlo-track-steps li{
  flex:1;position:relative;text-align:center;font-size:11.5px;color:var(--quiet);
  padding-top:22px;
}
.phlo-track-steps li span{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;background:#e2e7dd;
}
/* The rail between the dots, drawn behind them. */
.phlo-track-steps li::before{
  content:'';position:absolute;top:6px;left:-50%;width:100%;height:2px;background:#e2e7dd;
}
.phlo-track-steps li:first-child::before{display:none}
.phlo-track-steps li.is-done span,
.phlo-track-steps li.is-now span{background:#20261f}
.phlo-track-steps li.is-done::before{background:#20261f}
.phlo-track-steps li.is-done,
.phlo-track-steps li.is-now{color:var(--ink);font-weight:700}
.phlo-track-steps li.is-now span{box-shadow:0 0 0 4px rgba(32,38,31,.14)}

.phlo-track-dest{
  margin:0;padding:4px 18px 0;background:#fff;font-size:13px;color:var(--quiet);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.phlo-track-note{
  margin:0;padding:16px 18px 20px;background:#fff;font-size:14px;line-height:1.6;
  color:var(--quiet);border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;
}

/* The journey itself, newest first. */
.phlo-track-list{
  list-style:none;margin:0;padding:10px 18px 18px;background:#fff;
  border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;
}
.phlo-track-list li{
  position:relative;padding:11px 0 11px 22px;border-top:1px solid var(--line);
}
.phlo-track-list li:first-child{border-top:0}
.phlo-track-list li::before{
  content:'';position:absolute;left:3px;top:17px;
  width:9px;height:9px;border-radius:50%;background:#cfd6c8;
}
.phlo-track-list li.is-latest::before{background:#20261f;box-shadow:0 0 0 3px rgba(32,38,31,.13)}
.phlo-track-list li.is-latest strong{color:var(--ink)}
.phlo-track-list strong{display:block;font-size:14px}
.phlo-track-list span{display:block;font-size:12.5px;color:var(--quiet);margin-top:1px}
.phlo-track-list small{display:block;font-size:11.5px;color:var(--quiet);margin-top:3px}

.phlo-track-help{margin:30px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.phlo-track-help h2{margin:0 0 7px;font-size:14px;font-weight:800}
.phlo-track-help p{margin:0 0 12px;font-size:13.5px;line-height:1.6;color:var(--quiet);max-width:52ch}
.phlo-track-help strong{color:var(--ink)}

@media (max-width:520px){
  .phlo-track-steps{padding:16px 10px 4px}
  .phlo-track-steps li{font-size:10.5px}
  .phlo-track-status{margin-left:0}
}

/* Policies ------------------------------------------------------------------
   The page lives outside .phlo-shop, so none of the colour tokens declared
   there reach it. Everything below is a literal colour for that reason. */
.phlo-policies{
  max-width:860px;margin:0 auto;padding:0 16px 48px;
  color:#20261f;font-size:15px;line-height:1.65;
}
.phlo-policies-tabs{
  display:flex;gap:4px;overflow-x:auto;margin:0 0 26px;padding-bottom:2px;
  border-bottom:1px solid #e2e7dd;-webkit-overflow-scrolling:touch;
}
.phlo-policies-tabs::-webkit-scrollbar{display:none}
.phlo-policies-tabs button{
  flex:0 0 auto;background:none;border:0;cursor:pointer;font:inherit;
  font-size:13.5px;font-weight:700;color:#6c7568;
  padding:12px 14px;border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap;
}
.phlo-policies-tabs button:hover{color:#20261f}
.phlo-policies-tabs button[aria-selected="true"]{color:#20261f;border-bottom-color:#20261f}

/* Without the script every policy simply stacks, each with its own heading. */
.phlo-policies:not(.is-tabbed) .phlo-policies-tabs{display:none}
.phlo-policies:not(.is-tabbed) .phlo-policy{
  margin-bottom:46px;padding-bottom:36px;border-bottom:1px solid #e2e7dd;
}
.phlo-policies.is-tabbed .phlo-policy h2{position:absolute;left:-9999px}

.phlo-policy h2{margin:0 0 6px;font-size:24px;font-weight:800;letter-spacing:-.015em}
.phlo-policy-intro{margin:0 0 18px;color:#6c7568;font-size:14.5px;max-width:60ch}
.phlo-policy-pending{
  margin:0 0 22px;padding:12px 14px;border-left:3px solid #c7f24b;
  background:#f6f7f4;font-size:13.5px;line-height:1.55;color:#44523a;
}

.phlo-policy-toc{margin:0 0 26px;border:1px solid #e2e7dd;border-radius:12px;background:#fff}
.phlo-policy-toc > summary{
  cursor:pointer;padding:12px 16px;font-size:13px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;list-style:none;
}
.phlo-policy-toc > summary::-webkit-details-marker{display:none}
.phlo-policy-toc > summary::after{content:' +';color:#8a9285}
.phlo-policy-toc[open] > summary::after{content:' \2212'}
.phlo-policy-toc ol{margin:0;padding:0 18px 16px 34px;columns:2;column-gap:26px}
.phlo-policy-toc li{margin:0 0 5px;font-size:13px;break-inside:avoid}
.phlo-policy-toc a{color:#44523a;text-decoration:none}
.phlo-policy-toc a:hover{color:#20261f;text-decoration:underline}

.phlo-policy-sec{margin:0 0 26px;scroll-margin-top:84px}
.phlo-policy-sec h3{
  margin:0 0 8px;font-size:16px;font-weight:800;letter-spacing:-.005em;
  display:flex;gap:9px;align-items:baseline;
}
.phlo-policy-sec h3 span{
  flex:0 0 auto;font-size:12px;font-weight:700;color:#8a9285;
  font-variant-numeric:tabular-nums;
}
.phlo-policy-sec p{margin:0 0 11px}
.phlo-policy-sec ul{margin:0 0 12px;padding-left:20px}
.phlo-policy-sec li{margin:0 0 5px}

.phlo-policy-ask{
  margin:34px 0 0;padding-top:18px;border-top:1px solid #e2e7dd;
  font-size:14px;color:#6c7568;
}
.phlo-policy-ask a{color:#20261f;font-weight:700}

@media (max-width:620px){
  .phlo-policy-toc ol{columns:1}
  .phlo-policy h2{font-size:21px}
  .phlo-policies{font-size:14.5px}
}

/* Policies, readable ---------------------------------------------------------
   The theme styles headings pale grey-green, which on white is close to
   invisible, and it squeezes the content column to 600px. A legal document
   has to be legible above all else, so everything below states its own
   colour and size rather than inheriting, and the page breaks out of the
   theme's narrow column. */
.phlo-policies{
  max-width:820px;width:100%;
  margin-left:auto;margin-right:auto;
  font-size:16px;line-height:1.7;color:#20261f;
}
.phlo-policies *{color:inherit}

.phlo-policies .phlo-policy h2{
  color:#20261f;font-size:26px;line-height:1.25;margin:0 0 8px;
}
.phlo-policies .phlo-policy-intro{color:#5a6356;font-size:15.5px;margin:0 0 20px}

.phlo-policies .phlo-policy-sec{margin:0 0 30px}
.phlo-policies .phlo-policy-sec h3{
  color:#20261f;font-size:18px;line-height:1.35;font-weight:800;
  margin:0 0 10px;
}
.phlo-policies .phlo-policy-sec h3 span{color:#7b8475;font-size:13px}
.phlo-policies .phlo-policy-sec p{color:#262e24;font-size:16px;margin:0 0 12px}
.phlo-policies .phlo-policy-sec li{color:#262e24;font-size:16px;margin:0 0 7px}
.phlo-policies .phlo-policy-sec ul{margin:0 0 14px;padding-left:22px;list-style:disc}

/* A hairline before each clause so forty of them do not read as one block. */
.phlo-policies .phlo-policy-sec + .phlo-policy-sec{
  border-top:1px solid #e8ece4;padding-top:24px;
}

.phlo-policies .phlo-policies-tabs button{color:#5a6356}
.phlo-policies .phlo-policies-tabs button[aria-selected="true"]{color:#20261f}
.phlo-policies .phlo-policy-toc a{color:#3d4a37}
.phlo-policies .phlo-policy-toc li{font-size:14px}
.phlo-policies .phlo-policy-pending{color:#44523a}
.phlo-policies .phlo-policy-ask{color:#5a6356;font-size:15px}
.phlo-policies .phlo-policy-ask a{color:#20261f}

@media (max-width:640px){
  .phlo-policies{font-size:15.5px}
  .phlo-policies .phlo-policy h2{font-size:22px}
  .phlo-policies .phlo-policy-sec h3{font-size:16.5px}
  .phlo-policies .phlo-policy-sec p,
  .phlo-policies .phlo-policy-sec li{font-size:15.5px}
}

/* The theme renders a page as a blog post inside a narrow Bootstrap column.
   Forty clauses of legal text in a 600px strip is punishing to read, so on
   the policy page - and only there - that column takes the full width. */
body.phlo-policy-page .col-lg-8.section-blog__post{
  flex:0 0 100%;max-width:100%;
}
body.phlo-policy-page .container.py-small{max-width:1100px}

/* Policies, dressed -----------------------------------------------------------
   Ninety-six clauses across four documents. The job here is to make them
   look like something phlo wrote rather than a legal dump, and to make any
   one clause findable. */

/* The tab bar stays put, so moving between policies never means scrolling
   back up through forty sections to find the tabs again. */
.phlo-policies-tabs{
  position:sticky;top:0;z-index:5;background:#fff;
  padding-top:8px;margin-bottom:0;
  box-shadow:0 10px 14px -12px rgba(32,38,31,.25);
}
body.admin-bar .phlo-policies-tabs{top:32px}
.phlo-policies-tabs button{padding:13px 15px;font-size:14px}

/* Each policy opens with a masthead rather than straight into clause one. */
.phlo-policy-head{
  margin:26px 0 24px;padding:22px 24px;border-radius:16px;
  background:linear-gradient(180deg,#f6f7f4 0%,#fff 100%);
  border:1px solid #e2e7dd;
}
.phlo-policies .phlo-policy-head h2{
  position:static !important;left:auto !important;
  margin:0 0 7px;font-size:27px;line-height:1.2;color:#20261f;
}
.phlo-policies .phlo-policy-head .phlo-policy-intro{
  margin:0 0 10px;font-size:16px;color:#4a5246;max-width:58ch;
}
.phlo-policy-meta{
  margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:#8a9285;font-weight:700;
}
/* A lime rule under the masthead ties it to the brand without shouting. */
.phlo-policy-head::after{
  content:'';display:block;width:54px;height:3px;background:#c7f24b;
  border-radius:2px;margin-top:16px;
}

/* Contents: a two-column map, open on arrival. */
.phlo-policies .phlo-policy-toc{
  background:#fff;border:1px solid #e2e7dd;border-radius:14px;margin:0 0 28px;
}
.phlo-policies .phlo-policy-toc > summary{
  padding:14px 18px;font-size:12px;letter-spacing:.08em;color:#5a6356;
}
.phlo-policies .phlo-policy-toc ol{
  padding:0 20px 18px 38px;counter-reset:none;
}
.phlo-policies .phlo-policy-toc li{margin:0 0 7px;line-height:1.45}

/* Clauses. The number sits in its own column so the titles line up. */
.phlo-policies .phlo-policy-sec{
  display:grid;grid-template-columns:52px 1fr;gap:0 14px;
  margin:0 0 4px;padding:22px 0;
}
.phlo-policies .phlo-policy-sec + .phlo-policy-sec{border-top:1px solid #e8ece4;padding-top:22px}
.phlo-policies .phlo-policy-sec h3{
  grid-column:1 / -1;display:grid;grid-template-columns:52px 1fr;gap:0 14px;
  align-items:baseline;margin:0 0 10px;
}
.phlo-policies .phlo-policy-sec h3 span{
  display:inline-block;text-align:right;color:#8a9285;
  font-size:13px;font-variant-numeric:tabular-nums;font-weight:700;
}
.phlo-policies .phlo-policy-sec > p,
.phlo-policies .phlo-policy-sec > ul,
.phlo-policies .phlo-policy-sub{grid-column:2}
.phlo-policies .phlo-policy-sub{margin:18px 0 6px;font-family:inherit;font-size:15.5px;font-weight:800;
  line-height:1.4;letter-spacing:0;text-transform:none;color:#20261f}
.phlo-policies .phlo-policy-sub span{color:#8a9285;font-size:13px;margin-right:6px;font-variant-numeric:tabular-nums}

/* Bullets with a lime marker, so a long list of conditions scans. */
.phlo-policies .phlo-policy-sec ul{list-style:none;padding-left:0}
.phlo-policies .phlo-policy-sec li{position:relative;padding-left:17px}
.phlo-policies .phlo-policy-sec li::before{
  content:'';position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;background:#aebf6e;
}

.phlo-policies .phlo-policy-ask{
  margin:30px 0 0;padding:16px 18px;border-top:0;border-radius:12px;
  background:#f6f7f4;border:1px solid #e2e7dd;
}

@media (max-width:640px){
  .phlo-policy-head{padding:18px 16px;margin:18px 0 20px}
  .phlo-policies .phlo-policy-head h2{font-size:22px}
  /* The number column costs too much width on a phone. */
  .phlo-policies .phlo-policy-sec,
  .phlo-policies .phlo-policy-sec h3{grid-template-columns:1fr;gap:0}
  .phlo-policies .phlo-policy-sec > p,
  .phlo-policies .phlo-policy-sec > ul,
  .phlo-policies .phlo-policy-sub{grid-column:1}
  .phlo-policies .phlo-policy-sec h3 span{text-align:left;display:block;margin-bottom:2px}
}

/* A row lifted from a table in the original document: label on the left,
   the figure it refers to on the right, with a dotted rule between so the
   pairing survives on a wide screen. */
.phlo-policies .phlo-policy-kv{
  display:flex;align-items:baseline;gap:10px;
  margin:0 0 7px;padding:7px 0;border-bottom:1px dotted #d8ded2;
}
.phlo-policies .phlo-policy-kv span{color:#4a5246}
.phlo-policies .phlo-policy-kv strong{
  margin-left:auto;text-align:right;white-space:nowrap;color:#20261f;font-weight:700;
}

/* A set card built from its pieces ------------------------------------------
   There is no set photography yet, so the card composes one. Every garment
   is photographed on the same model in the same colour against the same
   background, so butted together the tiles read as a single picture and
   every set looks identical. Gaps, a border and a label on each tile make it
   obvious that these are the pieces of a set rather than one photograph. */
.phlo-shop-setgrid{
  position:absolute;inset:0;display:grid;gap:4px;padding:4px;background:#fff;
}
.phlo-shop-setgrid.is-2up{grid-template-columns:repeat(2,1fr)}
.phlo-shop-setgrid.is-3up{grid-template-columns:repeat(3,1fr)}
.phlo-shop-setgrid.is-4up{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr)}

.phlo-shop-settile{
  position:relative;overflow:hidden;border-radius:7px;background:#eef0ea;
  display:block;
}
.phlo-shop-settile img{width:100%;height:100%;object-fit:cover;display:block}
.phlo-shop-settile i{display:block;width:100%;height:100%}
.phlo-shop-settile em{
  position:absolute;left:5px;bottom:5px;
  background:rgba(32,38,31,.82);color:#fff;
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:2px 6px;border-radius:999px;
}
@media (max-width:480px){
  .phlo-shop-settile em{font-size:8.5px;padding:1px 5px;left:4px;bottom:4px}
}