/* ============================================================
   seeu — WordPress & WooCommerce bridge
   ------------------------------------------------------------
   seeu.css is the design system and does not know what CMS it is
   running on. This file is the only place that knows about
   WordPress's and WooCommerce's own markup, and its job is to make
   that markup obey the system rather than fight it.

   Nothing here introduces a new colour, typeface or spacing value.
   Everything reaches for a token that already exists.
   ============================================================ */

/* ── 1. Editor content ──────────────────────────────────────
   Anything typed into the WordPress editor lands inside .ed.
   seeu.css already styles p, h2, figure and blockquote.pull —
   these are the tags it did not need until now. */

/* A page's heading and its body have to sit on the same left edge.
   .ed is a 640px reading column; this holds the page header to the
   same measure so the two do not drift apart. */
.wrap--read{max-width:calc(640px + var(--gut) * 2)}
.wrap--read .ed{margin-left:0;margin-right:0}

/* The first paragraph of a piece opens larger, as the design does. */
.ed>p:first-child,.ed p.first{
  font-family:var(--display);font-size:clamp(19px,2.4vw,26px);color:var(--ink);
  line-height:1.5;font-weight:400;letter-spacing:-.015em}

.ed h1{font-family:var(--display);font-weight:400;letter-spacing:-.035em;
  font-size:clamp(30px,4.2vw,52px);line-height:1.06;margin:clamp(48px,6vw,84px) 0 22px}
.ed h3{font-family:var(--display);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(19px,2.2vw,25px);line-height:1.25;margin:clamp(34px,4vw,52px) 0 14px}
.ed h4,.ed h5,.ed h6{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;margin:clamp(30px,3.5vw,44px) 0 12px}

.ed ul,.ed ol{margin:0 0 21px 1.1em;color:var(--ink-2);font-size:15.5px;line-height:1.82}
.ed li{margin-bottom:9px}
.ed li::marker{color:var(--ink-4)}

.ed a{border-bottom:1px solid var(--line-2);transition:border-color .5s var(--ease)}
.ed a:hover{border-bottom-color:var(--ink)}

.ed strong{font-weight:500;color:var(--ink)}
.ed em{font-style:italic}

/* A quote in an article is a pull quote — that is the only quote
   treatment this design has. The editor's own quote block gets it
   too, so writers do not have to know about a CSS class.

   The inner <p> must inherit: wpautop wraps quote text in a
   paragraph, and .ed p would otherwise drag it back to body size. */
.ed blockquote,.ed .wp-block-quote{
  font-family:var(--display);font-weight:400;letter-spacing:-.032em;
  font-size:clamp(23px,3.3vw,37px);line-height:1.24;color:var(--ink);
  padding:clamp(34px,4.4vw,54px) 0;margin:clamp(34px,4.4vw,54px) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  border-left:0;padding-left:0;
}
.ed blockquote>p,.ed .wp-block-quote>p{
  font:inherit;color:inherit;letter-spacing:inherit;margin:0 0 14px}
.ed blockquote>p:last-child,.ed .wp-block-quote>p:last-child{margin-bottom:0}
.ed blockquote em,.ed .wp-block-quote em{font-style:italic}
.ed blockquote cite,.ed .wp-block-quote cite{
  display:block;margin-top:18px;font-family:var(--body);font-style:normal;
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}

.ed hr,.ed .wp-block-separator{height:1px;background:var(--line);border:0;margin:clamp(40px,5vw,68px) 0}

.ed table{width:100%;border-collapse:collapse;margin:clamp(30px,4vw,48px) 0;font-size:14px}
.ed th,.ed td{text-align:left;padding:13px 14px 13px 0;border-bottom:1px solid var(--line)}
.ed th{font-weight:400;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.ed td{color:var(--ink-2)}

.ed code,.ed kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  background:var(--paper-2);padding:2px 6px}
.ed pre{background:var(--paper-2);padding:20px;overflow-x:auto;margin:0 0 21px;font-size:13px;line-height:1.6}
.ed pre code{background:none;padding:0}

/* Images and captions inside the editor */
.ed img{height:auto}
.ed .wp-block-image,.ed figure{margin:clamp(44px,6vw,72px) 0}
.ed .wp-block-image figcaption,.ed figcaption,.ed .wp-caption-text{
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-top:14px}

/* The editor's own alignment classes, held to the reading column */
.ed .alignleft{float:left;margin:6px clamp(22px,3vw,40px) 22px 0;max-width:50%}
.ed .alignright{float:right;margin:6px 0 22px clamp(22px,3vw,40px);max-width:50%}
.ed .aligncenter{margin-left:auto;margin-right:auto;display:block}
.ed .alignwide{width:min(1000px,90vw);margin-left:50%;transform:translateX(-50%);max-width:none}
.ed .alignfull{width:100vw;margin-left:50%;transform:translateX(-50%);max-width:none}
.ed .wp-block-embed iframe,.ed iframe{max-width:100%}

@media(max-width:700px){
  .ed .alignleft,.ed .alignright{float:none;margin:clamp(30px,5vw,44px) 0;max-width:100%}
  .ed .alignwide,.ed .alignfull{width:100%;margin-left:0;transform:none}
}

/* ── 2. Pagination ────────────────────────────────────────── */

.navigation.pagination,.woocommerce-pagination{
  display:flex;justify-content:center;padding-block:clamp(50px,7vw,90px) 0;
}
.navigation.pagination .screen-reader-text{position:absolute;left:-9999px}
.page-numbers{list-style:none;display:flex;gap:6px;align-items:center;margin:0;padding:0}
.page-numbers li{margin:0}
a.page-numbers,span.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 12px;
  font-size:12.5px;letter-spacing:.04em;color:var(--ink-3);
  border:1px solid transparent;transition:color .6s var(--soft),border-color .6s var(--soft);
}
a.page-numbers:hover{color:var(--ink);border-color:var(--line-2)}
span.page-numbers.current{color:var(--ink);border-color:var(--ink)}

/* ── 3. Search ────────────────────────────────────────────── */

.seeu-search{display:flex;max-width:420px;border-bottom:1px solid var(--line-2);
  transition:border-color .5s var(--ease)}
.seeu-search:focus-within{border-bottom-color:var(--ink)}
.seeu-search input{flex:1;background:transparent;border:0;outline:none;
  font-family:var(--body);font-size:14.5px;font-weight:300;color:var(--ink);padding:14px 2px}
.seeu-search input::placeholder{color:var(--ink-3)}
.seeu-search button{background:transparent;border:0;cursor:pointer;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;padding:14px 4px 14px 20px}

/* ============================================================
   WooCommerce
   ============================================================ */

/* ── 5. Cards ─────────────────────────────────────────────── */

/* .card__add is a <button> on purchasable products and an <a> on the
   rest. Both need to look identical. */
/* The homepage grid only ever has one row; the shop has several, and
   a row gap sized for columns reads as cramped between them. */
.grid-3{row-gap:clamp(48px,6vw,88px)}

a.card__add{display:inline-block;text-align:center;text-decoration:none}
.card__add.is-busy{opacity:.45;pointer-events:none}
/* opacity:.4 put the old price at 1.85:1 — unreadable, and on a shop that
   is a pricing-transparency problem as much as an accessibility one. */
/* A price a customer cannot read is a pricing-transparency problem, not
   just a contrast one — they cannot check the discount they are shown.
   Body ink, not the quiet grey, and a thin rule so the strike does not
   eat the digits. */
.card .price del{color:var(--ink-2);opacity:1;margin-right:7px;
  text-decoration-thickness:1px;text-underline-offset:0}
.card .price ins{text-decoration:none}
.card .price .woocommerce-Price-currencySymbol{font-size:.86em}

/* WooCommerce prints its own onsale flash — the design has .card__badge */
.woocommerce span.onsale{display:none}

/* ── 6. Product page ──────────────────────────────────────── */

.pdp__main .ph-shot img{width:100%;height:100%;object-fit:cover}
.pdp__price del{color:var(--ink-2);opacity:1;font-size:.7em;margin-right:8px;text-decoration-thickness:1px}
.pdp__price ins{text-decoration:none}
.pdp__cta.is-busy{opacity:.45;pointer-events:none}

/* Variable / grouped / external products fall back to WooCommerce's
   own form. Hold it to the same type and spacing as the rest. */
.pdp__form{margin-top:22px}
.pdp__form .variations{width:100%;border-collapse:collapse;margin-bottom:20px}
.pdp__form .variations th,.pdp__form .variations td{
  text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.pdp__form .variations th{font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;width:38%}
.pdp__form select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);
  font-family:var(--body);font-size:15px;font-weight:300;color:var(--ink);
  padding:10px 2px;outline:none;border-radius:0;-webkit-appearance:none;appearance:none}
.pdp__form select:focus{border-bottom-color:var(--ink)}
.pdp__form .reset_variations{font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);
  border-bottom:1px solid var(--line-2);display:inline-block;margin-top:10px}
.pdp__form .woocommerce-variation-price{margin-bottom:18px;font-size:19px;font-weight:300}

.quantity{display:inline-flex;align-items:center;border:1px solid var(--line-2);margin-right:12px}
.quantity input[type=number]{
  width:62px;background:transparent;border:0;outline:none;text-align:center;
  font-family:var(--body);font-size:14px;color:var(--ink);padding:13px 0;
  -moz-appearance:textfield;border-radius:0}
.quantity input[type=number]::-webkit-outer-spin-button,
.quantity input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.single_add_to_cart_button,
.woocommerce a.button,.woocommerce button.button,
.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce .woocommerce-Button{
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);cursor:pointer;
  font-family:var(--body);font-size:10.5px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;padding:16px 34px;border-radius:0;line-height:1;
  transition:background .7s var(--soft),color .7s var(--soft);
}
.single_add_to_cart_button:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,
.woocommerce input.button:hover,.woocommerce #respond input#submit:hover,
.woocommerce .woocommerce-Button:hover{background:transparent;color:var(--ink)}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt{
  background:var(--ink);color:var(--paper);border-color:var(--ink)}
.woocommerce button.button:disabled,.woocommerce button.button.disabled{opacity:.4}
.single_add_to_cart_button{width:100%}

/* The accordion carries WooCommerce's tab content */
.acc__panel .woocommerce-product-attributes{width:100%;border-collapse:collapse;font-size:14px}
.acc__panel .woocommerce-product-attributes th,
.acc__panel .woocommerce-product-attributes td{
  text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--line)}
.acc__panel .woocommerce-product-attributes th{font-weight:400;color:var(--ink-3);
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.acc__panel p{color:var(--ink-2);font-size:14.5px;line-height:1.78;margin-bottom:14px}
.acc__panel ul{margin:0 0 14px 1.1em;color:var(--ink-2);font-size:14.5px;line-height:1.78}

/* ── 7. Notices, and the toast ────────────────────────────── */

.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,.woocommerce-info,.woocommerce-error,
.woocommerce .woocommerce-message,.woocommerce .woocommerce-info,.woocommerce .woocommerce-error{
  list-style:none;background:var(--paper-2);border:0;border-left:1px solid var(--ink);
  color:var(--ink-2);font-size:13.5px;line-height:1.7;padding:18px 22px;margin:0 0 24px;
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}
.woocommerce-error{border-left-color:#8a3b3b}
.woocommerce-message .button,.woocommerce-info .button{padding:12px 22px;font-size:10px}

/* While a change is in flight the bag stops taking clicks, so a second
   tap cannot be read against a quantity that is already stale. Close
   and checkout stay live — only the rows go inert. */
.cart.is-busy .cart__items{pointer-events:none;opacity:.5;transition:opacity .3s var(--soft)}

.seeu-toast{
  position:fixed;left:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,34px);z-index:290;
  background:var(--ink);color:var(--paper);font-size:12.5px;line-height:1.5;
  padding:15px 20px;max-width:min(360px,80vw);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .6s var(--soft),transform .6s var(--soft);
}
.seeu-toast.in{opacity:1;transform:none}

/* ── 9. Print ─────────────────────────────────────────────── */

@media print{
  .nav,.drawer,.cart,.scrim,.consent,.seeu-toast,.band,body::after{display:none!important}
  .hero__in{position:static}
}