/* ==========================================================================
   YCART STOREFRONT — design system for Shop / category / product / cart /
   checkout / account. Matches the homepage widget exactly.

   PAYMENT SAFETY
   Your card gateway is Square, which renders its card inputs inside hosted
   <iframe>s. Layout properties on those elements break card entry, so this
   file never sets overflow, height, max-height, visibility, transform,
   position or display on anything inside #payment. The guard block at the
   bottom re-asserts that. Do not remove it.
   ========================================================================== */

:root{
  --ysf-white:#FFFFFF;
  --ysf-cream:#FBF6EC;
  --ysf-parch:#F1E7D5;
  --ysf-ink:#3A2A1C;
  --ysf-mute:#7A6A57;
  --ysf-wood:#7A5634;
  --ysf-wood-d:#5B3E24;
  --ysf-brass:#8F7220;
  --ysf-rule:#E5DAC4;
  --ysf-display:'Lora',Georgia,'Times New Roman',serif;
  --ysf-body:'Manrope',-apple-system,'Segoe UI',Helvetica,sans-serif;
  --ysf-radius:3px;
}

/* ── 1 · Type + ground ─────────────────────────────────────────────────── */

.woocommerce-page,
.woocommerce{
  font-family:var(--ysf-body);
  color:var(--ysf-ink);
}
.woocommerce-page h1,.woocommerce-page h2,.woocommerce-page h3,
.woocommerce-page h4,.woocommerce h1,.woocommerce h2,.woocommerce h3{
  font-family:var(--ysf-display);
  font-weight:500;
  letter-spacing:-.005em;
  color:var(--ysf-ink);
}
/* Astra underlines links inside content; the storefront should not. */
.woocommerce a,.woocommerce-page a{text-decoration:none}
.woocommerce a:hover,.woocommerce-page a:hover{text-decoration:none}

/* ── 2 · Buttons ───────────────────────────────────────────────────────── */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button{
  background-color:var(--ysf-wood);
  color:#fff;
  font-family:var(--ysf-body);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.2;
  padding:15px 26px;
  border:1px solid var(--ysf-wood);
  border-radius:var(--ysf-radius);
  transition:background-color .25s ease,border-color .25s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover{
  background-color:var(--ysf-wood-d);
  border-color:var(--ysf-wood-d);
  color:#fff;
}
/* secondary / outline buttons (e.g. "Continue shopping", "Update cart") */
.woocommerce .cart .button[name="update_cart"],
.woocommerce a.button.wc-backward{
  background-color:var(--ysf-parch);
  color:var(--ysf-ink);
  border-color:var(--ysf-rule);
}
.woocommerce .cart .button[name="update_cart"]:hover,
.woocommerce a.button.wc-backward:hover{
  background-color:var(--ysf-ink);
  color:#fff;
  border-color:var(--ysf-ink);
}
/* disabled state stays legible instead of vanishing */
.woocommerce .button:disabled,
.woocommerce .button[disabled]{opacity:.55;cursor:not-allowed}

/* ── 4 · Archive chrome: breadcrumb, count, sorting, pagination ────────── */

.woocommerce .woocommerce-breadcrumb{
  font-size:12.5px;
  color:var(--ysf-mute);
  margin-bottom:16px;
}
.woocommerce .woocommerce-breadcrumb a{color:var(--ysf-mute)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--ysf-wood)}

.woocommerce .woocommerce-result-count{
  color:var(--ysf-mute);
  font-size:13.5px;
}
.woocommerce .woocommerce-ordering select,
.woocommerce-page select.orderby{
  font-family:var(--ysf-body);
  font-size:13.5px;
  color:var(--ysf-ink);
  background-color:var(--ysf-cream);
  border:1px solid var(--ysf-rule);
  border-radius:100px;
  padding:9px 16px;
}

.woocommerce nav.woocommerce-pagination ul{border:0;gap:8px;display:flex;justify-content:center}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  min-width:42px;
  padding:11px 14px;
  border:1px solid var(--ysf-rule);
  border-radius:100px;
  background:var(--ysf-white);
  color:var(--ysf-ink);
  font-size:13.5px;
  font-weight:600;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--ysf-wood);
  border-color:var(--ysf-wood);
  color:#fff;
}

/* ── 5 · Product grid cards ──────────────────────────────── */
/* Rebuilt to match .yc-card from the homepage widget, element for element:
   parchment image plate at 4:3 contain · dark category tag top-left · Lora
   title · walnut price · full-width ink button with a bag icon, pinned to the
   bottom so every card in a row ends at the same line. */

.woocommerce ul.products{gap:clamp(16px,2.4vw,30px)}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  position:relative;                /* anchor for the category tag */
  display:flex;
  flex-direction:column;
  background:var(--ysf-white);
  border:1px solid var(--ysf-rule);
  border-radius:var(--ysf-radius);
  overflow:hidden;                 /* safe here — no gateway markup involved */
  text-align:left;
  transition:box-shadow .3s ease,border-color .3s ease;
}
.woocommerce ul.products li.product:hover{
  box-shadow:0 14px 32px rgba(58,42,28,.10);
  border-color:#D8C9AA;
}

/* the image plate */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:block}
.woocommerce ul.products li.product a img{
  background:var(--ysf-parch);
  margin:0;
  padding:14px;
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.woocommerce ul.products li.product:hover a img{transform:scale(1.05)}

/* category tag printed by the plugin, over the image.
   z-index matters: the image is transformed on hover, which makes its own
   stacking context and would otherwise paint over the tag. */
.woocommerce ul.products li.product .ycart-badge{
  position:absolute;
  z-index:3;
  top:11px;
  left:11px;
  background:var(--ysf-ink);
  color:#fff;
  padding:6px 11px;
  font-family:var(--ysf-body);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.17em;
  line-height:1;
  text-transform:uppercase;
  border-radius:2px;
  pointer-events:none;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--ysf-display);
  font-size:17px;
  font-weight:500;
  line-height:1.3;
  color:var(--ysf-ink);
  padding:15px 16px 0;
  margin:0;
}
.woocommerce ul.products li.product .price{
  display:block;
  padding:6px 16px 0;
  color:var(--ysf-wood);
  font-size:15px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
/* variable products show a range — keep the dash quiet next to the figures */
.woocommerce ul.products li.product .price .woocommerce-Price-amount{white-space:nowrap}
.woocommerce ul.products li.product .price del{color:var(--ysf-mute);font-weight:400}
.woocommerce ul.products li.product .price ins{text-decoration:none}
.woocommerce ul.products li.product .star-rating{margin:8px 16px 0;font-size:13px;color:var(--ysf-brass)}

/* the button. margin-top:auto pins it to the bottom of the card, so a short
   title and a two-line title still finish level. */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:16px 16px 16px;
  margin-top:auto;
  padding:14px;
  border-radius:var(--ysf-radius);
  text-align:center;
  background-color:var(--ysf-ink);
  border:1px solid var(--ysf-ink);
  color:#fff;
  font-family:var(--ysf-body);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:background-color .25s ease,border-color .25s ease;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.added_to_cart:hover{
  background-color:var(--ysf-wood);
  border-color:var(--ysf-wood);
  color:#fff;
}
/* the bag icon from the homepage card, inlined so it needs no extra request.
   ::before is used because WooCommerce owns ::after on .loading/.added_to_cart. */
.woocommerce ul.products li.product a.button::before{
  content:"";
  flex:none;
  width:15px;
  height:15px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l-1 12H7L6 8z'/%3E%3Cpath d='M9 8V6a3 3 0 016 0v2'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* the small "View cart" link Woo adds after an AJAX add is a quieter pill */
.woocommerce ul.products li.product a.added_to_cart{
  background-color:var(--ysf-parch);
  border-color:var(--ysf-rule);
  color:var(--ysf-ink);
  margin-top:0;
}
.woocommerce ul.products li.product a.added_to_cart::before{content:none}

/* Astra compatibility.
   Astra wraps the thumbnail and the summary in its own divs. Two things have
   to hold regardless of which wrapper the markup ends up in:
   • the category tag must anchor to the card, not to a wrapper — so the
     thumbnail wrap is forced back to position:static;
   • the summary wrap must stretch and lay out as a column, otherwise the
     button pins to the bottom of the WRAPPER instead of the card. */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{position:static;margin:0}
.woocommerce ul.products li.product .astra-shop-summary-wrap{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:0;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap>a.button{margin-top:auto}
/* Astra centres loop text by default */
.woocommerce ul.products li.product,
.woocommerce ul.products li.product .astra-shop-summary-wrap{text-align:left}

/* sale flash */
.woocommerce span.onsale{
  background:var(--ysf-brass);
  color:#fff;
  font-family:var(--ysf-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  border-radius:2px;
  min-height:0;
  min-width:0;
  line-height:1;
  padding:8px 12px;
}
/* keep the sale flash clear of the category tag */
.woocommerce ul.products li.product span.onsale{
  position:absolute;
  z-index:3;
  top:11px;
  left:auto;
  right:11px;
  margin:0;
}

/* ── 6 · Single product ────────────────────────────────────────────────── */

.woocommerce div.product .product_title{
  font-family:var(--ysf-display);
  font-size:clamp(26px,3.4vw,40px);
  font-weight:500;
  line-height:1.2;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--ysf-wood);
  font-size:24px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--ysf-mute);
  font-size:16px;
  line-height:1.75;
}
.woocommerce div.product form.cart .quantity input.qty{
  border:1px solid var(--ysf-rule);
  border-radius:var(--ysf-radius);
  padding:12px 8px;
  font-family:var(--ysf-body);
  color:var(--ysf-ink);
  background:var(--ysf-white);
}
.woocommerce div.product form.cart .button{padding:16px 32px}

/* trust list added by the plugin, sits outside the cart form.
   Icons are inline SVG echoed by the plugin, so they inherit currentColor. */
.ycart-trust{
  list-style:none;
  margin:24px 0 0;
  padding:18px 20px;
  background:var(--ysf-cream);
  border:1px solid var(--ysf-rule);
  border-radius:var(--ysf-radius);
  display:grid;
  gap:13px;
}
.ycart-trust li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0;
  font-size:14.5px;
  line-height:1.55;
  color:var(--ysf-ink);
}
.ycart-trust li svg{
  flex:none;
  width:19px;
  height:19px;
  margin-top:2px;
  color:var(--ysf-brass);
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ycart-trust li span{display:block}

/* ── 6b · Product tabs + attributes table ──────────────────────── */
/* The tab strip spans the whole content column, separated from the summary
   above it by a single rule. */
.woocommerce div.product .woocommerce-tabs{
  width:100%;
  clear:both;
  margin-top:clamp(38px,5vw,64px);
  padding-top:clamp(26px,3.4vw,38px);
  border-top:1px solid var(--ysf-rule);
}

/* WooCommerce draws its tabs as folder shapes: a rounded li plus two curved
   ::before / ::after pseudo-elements that fake the join to the line. All three
   are switched off here — left on, they turn a pill radius into a dome. */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  padding:0 0 12px;
  margin:0 0 clamp(22px,3vw,30px);
  border-bottom:1px solid var(--ysf-rule);
  list-style:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none;content:none}

/* the same pill as the homepage filter tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:var(--ysf-cream);
  border:1px solid var(--ysf-brass);
  border-radius:100px;
  margin:0;
  padding:0;
  box-shadow:none;
  transition:background-color .22s ease,border-color .22s ease;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;
  font-family:var(--ysf-body);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ysf-ink);
  padding:11px 22px;
  text-shadow:none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{
  background:var(--ysf-wood);
  border-color:var(--ysf-wood);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:#fff}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active:hover{
  background:var(--ysf-wood-d);
  border-color:var(--ysf-wood-d);
}

.woocommerce div.product .woocommerce-tabs .panel{
  margin:0;
  padding:0;
  color:var(--ysf-ink);
}
.woocommerce div.product .woocommerce-tabs .panel>h2{
  font-family:var(--ysf-display);
  font-size:clamp(20px,2.4vw,26px);
  font-weight:500;
  margin:0 0 16px;
}
.woocommerce div.product .woocommerce-tabs .panel p{
  color:var(--ysf-mute);
  font-size:15.5px;
  line-height:1.75;
  max-width:70ch;
}

/* the Additional information table — full width, no default grey grid */
.woocommerce div.product table.shop_attributes{
  width:100%;
  margin:0;
  border:1px solid var(--ysf-rule);
  border-radius:var(--ysf-radius);
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}
.woocommerce div.product table.shop_attributes tr:nth-child(even) th,
.woocommerce div.product table.shop_attributes tr:nth-child(even) td{
  background:var(--ysf-white);
}
.woocommerce div.product table.shop_attributes th,
.woocommerce div.product table.shop_attributes td{
  border:0;
  border-bottom:1px solid var(--ysf-rule);
  padding:15px 20px;
  font-style:normal;
  line-height:1.6;
}
.woocommerce div.product table.shop_attributes tr:last-child th,
.woocommerce div.product table.shop_attributes tr:last-child td{border-bottom:0}
.woocommerce div.product table.shop_attributes th{
  width:min(240px,32%);
  background:var(--ysf-cream);
  border-right:1px solid var(--ysf-rule);
  font-family:var(--ysf-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ysf-brass);
  vertical-align:top;
}
.woocommerce div.product table.shop_attributes td{
  background:var(--ysf-white);
  font-size:15px;
  color:var(--ysf-ink);
}
.woocommerce div.product table.shop_attributes td p{margin:0;padding:0}

/* reviews list inside the tab */
.woocommerce div.product #reviews .commentlist li .comment-text{
  border:1px solid var(--ysf-rule);
  border-radius:var(--ysf-radius);
  padding:18px 20px;
}
.woocommerce div.product #reviews .comment-reply-title{
  font-family:var(--ysf-display);
  font-size:19px;
}

.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2{
  font-family:var(--ysf-display);
  font-size:clamp(22px,2.8vw,30px);
  margin-bottom:22px;
}

/* ── 7 · Cart ──────────────────────────────────────────────────────────── */

.woocommerce table.shop_table{
  border:1px solid var(--ysf-rule);
  border-radius:var(--ysf-radius);
  border-collapse:separate;
}
.woocommerce table.shop_table th{
  font-family:var(--ysf-body);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ysf-brass);
  background:var(--ysf-cream);
  padding:16px 12px;
}
.woocommerce table.shop_table td{
  border-top:1px solid var(--ysf-rule);
  padding:18px 12px;
  color:var(--ysf-ink);
}
.woocommerce table.shop_table img{border:1px solid var(--ysf-rule);border-radius:2px}
.woocommerce table.cart td.product-name a{color:var(--ysf-ink);font-weight:600}
.woocommerce table.cart td.product-name a:hover{color:var(--ysf-wood)}
.woocommerce a.remove{
  color:var(--ysf-mute) !important;
  font-weight:400;
}
.woocommerce a.remove:hover{
  background:var(--ysf-wood);
  color:#fff !important;
}

.woocommerce .cart_totals h2{
  font-family:var(--ysf-display);
  font-size:22px;
  margin-bottom:16px;
}
.woocommerce .cart-collaterals .cart_totals table{border:1px solid var(--ysf-rule)}
.woocommerce .cart_totals .order-total .amount{color:var(--ysf-wood);font-size:19px}

.woocommerce .coupon input.input-text{
  border:1px solid var(--ysf-rule);
  border-radius:var(--ysf-radius);
  padding:14px 16px;
  font-family:var(--ysf-body);
  background:var(--ysf-white);
}

/* note blocks added by the plugin */
.ycart-note{
  margin:22px 0 0;
  padding:16px 18px;
  background:var(--ysf-cream);
  border:1px solid var(--ysf-rule);
  border-radius:var(--ysf-radius);
  font-size:14.5px;
  color:var(--ysf-mute);
  line-height:1.7;
}
.ycart-note strong{color:var(--ysf-ink)}
.ycart-note a{color:var(--ysf-wood);font-weight:600}
.ycart-note--checkout{margin:0 0 20px}

/* ── 8 · Checkout (chrome only — see the guard block below) ────────────── */

.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading{
  font-family:var(--ysf-display);
  font-size:21px;
  font-weight:500;
  padding-bottom:12px;
  border-bottom:1px solid var(--ysf-rule);
  margin-bottom:20px;
}
.woocommerce form .form-row label{
  font-size:13px;
  font-weight:600;
  color:var(--ysf-ink);
  margin-bottom:6px;
}
.woocommerce form .form-row .required{color:var(--ysf-wood);text-decoration:none}

/* Inputs are styled ONLY outside #payment. Gateways render their own fields
   in there and must be left exactly as the gateway wrote them. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account form input.input-text{
  font-family:var(--ysf-body);
  font-size:15px;
  color:var(--ysf-ink);
  background:var(--ysf-white);
  border:1px solid var(--ysf-rule);
  border-radius:var(--ysf-radius);
  padding:13px 15px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus{
  border-color:var(--ysf-wood);
  outline:0;
  box-shadow:0 0 0 3px rgba(122,86,52,.13);
}

.woocommerce-checkout-review-order-table{background:var(--ysf-white)}
.woocommerce-checkout-review-order-table tfoot th{
  background:var(--ysf-cream);
  color:var(--ysf-ink);
  letter-spacing:.06em;
  text-transform:none;
  font-size:14px;
}
.woocommerce-checkout-review-order-table tfoot .order-total .amount{
  color:var(--ysf-wood);
  font-size:19px;
}

#place_order,
.woocommerce #payment #place_order{
  background-color:var(--ysf-wood);
  border-color:var(--ysf-wood);
  color:#fff;
  font-size:13px;
  letter-spacing:.14em;
  padding:17px 30px;
}
#place_order:hover,
.woocommerce #payment #place_order:hover{
  background-color:var(--ysf-wood-d);
  border-color:var(--ysf-wood-d);
}

/* ── 9 · Notices ───────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  background:var(--ysf-cream);
  border-top:3px solid var(--ysf-wood);
  border-radius:var(--ysf-radius);
  color:var(--ysf-ink);
  font-size:14.5px;
}
.woocommerce-message::before,
.woocommerce-info::before{color:var(--ysf-wood)}
.woocommerce-error{border-top-color:#9C3B2B}
.woocommerce-error::before{color:#9C3B2B}
.woocommerce-message .button,
.woocommerce-info .button{background-color:var(--ysf-ink);border-color:var(--ysf-ink)}

/* ── 10 · My account ───────────────────────────────────────────────────── */

.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0}
.woocommerce-account .woocommerce-MyAccount-navigation li{
  border-bottom:1px solid var(--ysf-rule);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:block;
  padding:13px 4px;
  font-size:14.5px;
  color:var(--ysf-mute);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  color:var(--ysf-ink);
  font-weight:600;
}

/* ── 11 · Responsive ───────────────────────────────────────────────────── */

@media (max-width:640px){
  .woocommerce div.product .woocommerce-tabs ul.tabs{gap:7px;padding-bottom:10px}
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:10px 16px;font-size:11.5px}
  .woocommerce div.product table.shop_attributes th,
  .woocommerce div.product table.shop_attributes td{padding:12px 14px;font-size:14px}
  .woocommerce div.product table.shop_attributes th{width:38%;font-size:10px;letter-spacing:.13em}
  .ycart-trust{padding:16px 16px;gap:11px}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:16px;padding:14px 14px 0}
  .woocommerce ul.products li.product .price{padding:6px 14px 0}
  .woocommerce ul.products li.product .ycart-badge{top:9px;left:9px;font-size:9px;padding:5px 9px}
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product a.added_to_cart{margin:13px 14px 14px;margin-top:auto;padding:13px;font-size:11px}
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button{padding:14px 22px;font-size:11.5px}
  .ycart-trust li{font-size:14px}
  .ycart-note{font-size:14px;padding:14px 15px}
}

/* ==========================================================================
   PAYMENT SAFETY GUARD  —  keep this block last, and do not edit it.

   Square (and PayPal, Cash App, Apple Pay) render their card fields inside
   hosted iframes injected into #payment. If a stylesheet changes their box
   model, clips them, or animates them, the fields can render at zero height
   or stop receiving input, and customers cannot pay.

   Below we (a) apply only colour/typography inside #payment and (b) hard
   reset the layout of any iframe or gateway-generated field so no rule from
   this file, the theme, or a future edit can affect them.
   ========================================================================== */

.woocommerce #payment{
  background:transparent;
  border-radius:0;
}
.woocommerce #payment ul.payment_methods{
  border-bottom:1px solid var(--ysf-rule);
  padding:16px 0;
}
.woocommerce #payment ul.payment_methods li label{
  font-family:var(--ysf-body);
  font-size:15px;
  font-weight:600;
  color:var(--ysf-ink);
}
.woocommerce #payment div.payment_box{
  background:var(--ysf-cream);
  color:var(--ysf-mute);
  font-size:14px;
}
.woocommerce #payment div.payment_box::before{border-bottom-color:var(--ysf-cream)}

/* Hands off everything the gateway renders. */
.woocommerce #payment iframe,
.woocommerce #payment [class*="wc-square"],
.woocommerce #payment [id*="wc-square"],
.woocommerce #payment [class*="hosted-field"],
.woocommerce #payment [id*="paypal"],
.woocommerce #payment [class*="paypal"],
.woocommerce #payment .wc-payment-form,
.woocommerce #payment .payment_box input,
.woocommerce #payment .payment_box iframe{
  all:revert;
}