/* 0.9.16: native Woo cart, visual grid test mode. */
.noofno-visual-native-cart {
  background:#fffdfb;
}

.noofno-visual-native-cart.noofno-visual-cart-frame .site-header,
.noofno-visual-native-cart.noofno-visual-cart-frame .site-footer {
  display:none!important;
}

/* The mobile product search is a sibling of .site-header/.site-content (child
   theme prints it for the mobile header). In frame mode the drawer has NO
   header, so the search must not appear above the cart. The frame JS skips
   moving it (it early-returns on .noofno-visual-cart-frame), so hide it here. */
.noofno-visual-native-cart.noofno-visual-cart-frame .noofno-mobile-product-search {
  display:none!important;
}

/* Frame cart: the drawer POPUP is fullscreen; the cart page inside the iframe
   should just render normally (it already lives under the drawer's own header
   bar, so it must NOT be treated as a separate fullscreen viewport). Keep the
   page shell flush to the top (no Astra content-area margin / entry-header gap)
   and let the cart content flow + scroll naturally inside the iframe. */
.noofno-visual-native-cart.noofno-visual-cart-frame .content-area.primary,
.noofno-visual-native-cart.noofno-visual-cart-frame .site-content,
.noofno-visual-native-cart.noofno-visual-cart-frame .site-main,
.noofno-visual-native-cart.noofno-visual-cart-frame .entry-content {
  min-height:0;
  margin:0!important;
  padding:0!important;
}

.noofno-visual-native-cart.noofno-visual-cart-frame .ast-container {
  padding:0!important;
}

.noofno-visual-native-cart.noofno-visual-cart-frame .woocommerce {
  width:100%;
  max-width:none;
  min-height:0;
  margin:0;
  padding:12px clamp(12px,1.6vw,24px) 28px;
  color:#2a211d;
}

.noofno-visual-native-cart.noofno-visual-cart-frame .woocommerce-cart-form {
  display:block;
  width:100%;
}

/* Cart totals follow the content naturally (no sticky pinning inside the
   iframe). Only tighten the card so it reads as a compact bottom summary. */
.noofno-visual-native-cart.noofno-visual-cart-frame .cart-collaterals {
  display:block;
  width:100%;
  margin:16px 0 0;
}

.noofno-visual-native-cart.noofno-visual-cart-frame .cart-collaterals .cart_totals {
  float:none;
  width:100%;
  max-width:none;
  margin:0;
  padding:14px;
  border:1px solid #eadfd8;
  border-radius:10px;
  background:#fff;
}

.noofno-visual-native-cart.noofno-visual-cart-frame .cart_totals h2 {
  display:none;
}

.noofno-visual-native-cart .site-content .ast-container,
.noofno-visual-native-cart .site-main .entry-content {
  max-width:none;
}

.noofno-visual-native-cart .entry-title,
.noofno-visual-native-cart .woocommerce-cart-form table.shop_table thead {
  display:none;
}

/* The page title <h1> is hidden above, but its empty .entry-header wrapper
   still carries Astra's margin-bottom (24px), which shoves the whole cart down
   and creates the "iframe 顶部留白太多" gap. Kill the wrapper too. */
.noofno-visual-native-cart .entry-header {
  display:none!important;
  margin:0!important;
  padding:0!important;
}

.noofno-visual-native-cart .woocommerce {
  width:100%;
  max-width:none;
  min-height:100vh;
  margin:0 auto;
  padding:14px clamp(12px,1.6vw,24px) 28px;
  color:#2a211d;
}

.noofno-visual-native-cart .woocommerce-notices-wrapper,
.noofno-visual-native-cart .woocommerce-message,
.noofno-visual-native-cart .woocommerce-error,
.noofno-visual-native-cart .woocommerce-info {
  border-radius:8px;
}

.noofno-visual-native-cart .woocommerce-cart-form {
  display:block;
  width:100%;
}

.noofno-visual-native-cart .woocommerce-cart-form table.shop_table {
  display:block;
  width:100%;
  margin:0;
  border:0;
  background:transparent;
}

.noofno-visual-native-cart .woocommerce-cart-form table.shop_table thead {
  display:none;
}

/* Convert the native Woo <table> to an adaptive visual cart grid that
   matches the Builder drawer cart feel WITHOUT squeezing items when there
   are fewer than 18 links (a fixed repeat(18,1fr) grid crushed every item
   to 1/18 width). Use auto-fill so each card keeps a readable minimum
   width and wraps into later rows. */
.noofno-visual-native-cart .woocommerce-cart-form table.shop_table {
  display:block;
  width:100%;
  border-collapse:collapse;
}

/* Adaptive bracelet grid: one compact cell width across all breakpoints so
   the column count rises monotonically with container width. The container
   max-width caps the grid at about 18 columns on PC, while phones land around
   five readable columns instead of the earlier three-card shopping layout. */
.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(62px,1fr));
  grid-auto-rows:max-content;
  column-gap:8px;
  row-gap:24px;
  min-height:0;
  padding:18px clamp(10px,1.8vw,24px);
  border:1px solid #eadfd8;
  border-radius:8px;
  background:linear-gradient(145deg,#f4eee9,#fff 68%);
  align-content:start;
}

/* Empty bracelet slot: dashed placeholder so a partially filled row reads as
   "bracelet to be completed" (18 charms = one bracelet). Appended by JS to
   fill ONLY the last row of the adaptive grid. The tr is the grid cell; the
   td just holds the centered + glyph. */
.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody .cart-slot-empty {
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:stretch;
  aspect-ratio:1;
  min-width:0;
  margin:0;
  border:1px dashed #d5c7be;
  border-radius:8px;
  background:rgba(255,255,255,.5);
}

.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody .cart-slot-empty td {
  width:100%;
  padding:0;
  border:0;
  background:transparent;
}

.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody .cart-slot-empty td::before {
  content:none;
}

.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody .cart-slot-empty td.cart-slot-empty__cell {
  display:flex;
  align-items:center;
  justify-content:center;
  color:#b9a9a0;
  font-size:22px;
  font-weight:700;
  line-height:1;
  opacity:.5;
}

/* One-line buying-unit note above the grid. */
.noofno-visual-native-cart .noofno-visual-cart-note {
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 10px;
  padding:10px 14px;
  border:1px solid #eadfd8;
  border-radius:8px;
  background:#fff9f5;
  color:#6a4030;
  font-size:12px;
  line-height:1.4;
}

.noofno-visual-native-cart .noofno-visual-cart-note strong {
  color:#2a211d;
}

/* Each cart row is one card. It is a flex column so image/name/controls/price
   stack. The image is square (width:100% + aspect-ratio:1) filling the card
   width so it never gets cropped into a narrow strip. */
.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  align-self:start;
  min-width:0;
  min-height:0;
  padding:5px 4px 6px;
  border:1px solid #e0d2c8;
  border-radius:8px;
  background:#fff;
  box-shadow:0 7px 18px rgba(39,25,18,.08);
  text-align:center;
}

.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td {
  display:block;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-thumbnail {
  order:1;
  flex:0 0 auto;
  min-height:0;
  display:block;
  width:100%;
  text-align:center;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-thumbnail a {
  display:block;
  width:100%;
  text-align:center;
}

/* Square image filling the full card width (never cropped to a strip).
   max-width:100% is forced so large grid cells (wide browse window) still
   stretch the image to the cell width instead of staying at the thumbnail's
   intrinsic size. */
.noofno-visual-native-cart .woocommerce-cart-form td.product-thumbnail img {
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin:0 auto;
  aspect-ratio:1;
  border-radius:6px;
  background:#f4efeb;
  object-fit:cover;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-name {
  order:2;
  min-height:17px;
  margin-top:4px;
  overflow:hidden;
  color:#2a211d;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(5.5px,0.4vw + 3px,8px);
  font-weight:400;
  line-height:1.2;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-name a {
  display:-webkit-box;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:1;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-price {
  display:none!important;
}

/* WooCommerce's shop_table_responsive prints a ::before with the column's
   data-title (e.g. "Product:", "Quantity:", "Price:") on the cart cells. The
   owner does not want those words inside the visual slot grid, so kill every
   data-title ::before on the card cells here at all breakpoints. */
.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td::before {
  content:none;
}

.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-price::before {
  content:none;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-subtotal {
  order:4;
  margin-top:4px;
  color:#2a211d;
  font-size:clamp(8px,0.5vw + 5px,11px);
  font-weight:800;
  line-height:1.2;
}

.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item td.product-subtotal::before {
  content:none;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-remove {
  position:absolute;
  z-index:2;
  top:3px;
  right:3px;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-remove a.remove {
  display:grid;
  width:18px;
  height:18px;
  place-items:center;
  border:2px solid #fff;
  border-radius:50%;
  background:#2b2420;
  color:#fff!important;
  font-size:0;
  line-height:1;
  text-decoration:none;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* The theme prints its own close SVG (ast-close-svg) inside a.remove; combined
   with our ::after "x" it reads as a doubled x floating over the product image.
   Hide the theme SVG span/icon and keep only our own circular x on the item. */
.noofno-visual-native-cart .woocommerce-cart-form td.product-remove a.remove .ahfb-svg-iconset,
.noofno-visual-native-cart .woocommerce-cart-form td.product-remove a.remove svg,
.noofno-visual-native-cart .woocommerce-cart-form td.product-remove a.remove span {
  display:none!important;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-remove a.remove::after {
  content:"x";
  font-family:Arial,sans-serif;
  font-size:clamp(8px,0.5vw + 5px,11px);
  font-weight:800;
  line-height:1;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity {
  order:3;
  margin-top:4px;
}

/* Keep -  qty  + on one row and shrink the large Astra ast-qty-placeholder
   links so they fit inside the narrow bracelet card without overlapping.
   The WooCommerce screen-reader-text <label> inside .quantity must be
   removed from layout or it pushes the +/- controls out of alignment once
   WP applies its positioning styles after load. */
.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity {
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:0;
  width:min(100%,62px);
  max-width:100%;
  white-space:nowrap;
  margin:0 auto;
  overflow:hidden;
  border:1px solid #d8cec8;
  border-radius:4px;
  background:#fff;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity label.screen-reader-text {
  display:none!important;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity .screen-reader-text,
.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity > label {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity a.ast-qty-placeholder,
.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity button.nfb-vqty-btn,
.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity button.nfb-qty-btn,
.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity button {
  display:inline-flex;
  flex:0 0 auto;
  width:18px;
  height:20px;
  min-width:0;
  max-width:18px;
  margin:0;
  padding:0;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:0;
  background:#fff;
  color:#2a211d;
  font-size:clamp(9px,0.5vw + 7px,12px);
  line-height:1;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity input.qty {
  flex:0 0 24px;
  width:24px;
  min-width:24px;
  max-width:24px;
  height:20px;
  min-height:20px;
  margin:0;
  padding:0;
  border:0;
  border-right:1px solid #e6d9d1;
  border-left:1px solid #e6d9d1;
  border-radius:0;
  background:#fff;
  color:#2a211d;
  font-size:clamp(9px,0.45vw + 6px,11px);
  font-weight:700;
  line-height:20px;
  text-align:center;
  text-indent:0!important;
  opacity:1!important;
  -webkit-text-fill-color:#2a211d;
  /* input is type="number": hide the native browser spin arrows so they don't
     render on top of our custom -/  +  stepper buttons. */
  -moz-appearance:textfield;
  appearance:textfield;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity input.qty::-webkit-outer-spin-button,
.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance:none;
  margin:0;
}

.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity a.ast-qty-placeholder,
.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity > a.minus,
.noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity > a.plus {
  display:none!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  pointer-events:none!important;
}

.noofno-visual-native-cart .woocommerce-cart-form tr:not(.cart_item):not(.cart-slot-empty) {
  display:block;
  grid-column:1/-1;
  margin-top:10px;
}

/* Actions row (coupon + update cart) flows full width under the product grid,
   wrapping on narrow screens. */
.noofno-visual-native-cart .woocommerce-cart-form td.actions {
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:14px 0 0!important;
}

.noofno-visual-native-cart .woocommerce-cart-form td.actions .coupon {
  display:flex;
  min-width:0;
  gap:8px;
}

.noofno-visual-native-cart .woocommerce-cart-form td.actions .coupon input.input-text {
  flex:1 1 auto;
  width:100%;
  min-width:0;
  min-height:42px;
  padding:0 12px;
  border:1px solid #eadfd8;
  border-radius:8px;
}

/* The visual cart updates quantities/removals automatically via AJAX (0.9.40),
   so the stock WooCommerce "Update cart" submit button is redundant and
   confusing. Hide it — qty stepper, qty input, and remove all sync on their own.
   The coupon "Apply coupon" button is kept (it has no auto-sync path). */
.noofno-visual-native-cart .woocommerce-cart-form button[name="update_cart"],
.noofno-visual-native-cart .woocommerce-cart-form input[name="update_cart"] {
  display:none!important;
}

/* Cart totals sits beside/below the grid in a clean card, and its inner table
   becomes a responsive list so it composes well with the product grid above. */
.noofno-visual-native-cart .cart-collaterals {
  display:grid;
  grid-template-columns:1fr;
  margin-top:18px;
}

.noofno-visual-native-cart .cart-collaterals .cart_totals {
  float:none;
  width:100%;
  padding:18px;
  border:1px solid #eadfd8;
  border-radius:10px;
  background:#fff;
}

.noofno-visual-native-cart .cart_totals h2 {
  margin:0 0 12px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:22px;
  font-weight:400;
}

/* totals table rows become a compact two-column list */
.noofno-visual-native-cart .cart_totals table.shop_table {
  border:0;
  border-collapse:collapse;
}
.noofno-visual-native-cart .cart_totals table.shop_table tr {
  display:grid;
  grid-template-columns:minmax(120px,.45fr) minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:8px 0;
  border-bottom:1px solid #f0e3dc;
}
.noofno-visual-native-cart .cart_totals table.shop_table tr:last-child {
  border-bottom:0;
}
.noofno-visual-native-cart .cart_totals table.shop_table th {
  border:0;
  padding:0;
  color:#75685f;
  font-size:12px;
  font-weight:700;
}
.noofno-visual-native-cart .cart_totals table.shop_table td {
  border:0;
  padding:0;
  text-align:right;
  color:#2a211d;
  font-size:13px;
  font-weight:700;
}
.noofno-visual-native-cart .cart_totals table.shop_table td::before {
  display:none!important;
  content:none!important;
}
.noofno-visual-native-cart .cart_totals .woocommerce-shipping-totals ul#shipping_method {
  margin:0;
  padding:0;
}
.noofno-visual-native-cart .cart_totals .woocommerce-shipping-totals li {
  list-style:none;
  margin:0;
  font-size:12px;
}
.noofno-visual-native-cart .cart_totals .woocommerce-shipping-destination {
  margin:4px 0 0;
  color:#8d7d75;
  font-size:11px;
}

/* Checkout CTA embedded at the bottom of the totals card. Make it the most
   prominent control on the cart (Phase 3): brand orange, larger, with a
   hover state and an arrow affordance. */
.noofno-visual-native-cart .cart_totals .wc-proceed-to-checkout {
  margin-top:16px;
}
.noofno-visual-native-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:48px;
  padding:12px 24px;
  border-radius:10px;
  background:#f2520c;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(242,82,12,.28);
  transition:background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.noofno-visual-native-cart .cart_totals .wc-proceed-to-checkout a.checkout-button:hover,
.noofno-visual-native-cart .cart_totals .wc-proceed-to-checkout a.checkout-button:focus-visible {
  background:#d94408;
  box-shadow:0 8px 20px rgba(242,82,12,.36);
  transform:translateY(-1px);
}
.noofno-visual-native-cart .cart_totals .wc-proceed-to-checkout a.checkout-button::after {
  content:"→";
  font-size:15px;
  line-height:1;
}

.noofno-visual-native-cart.noofno-cart-syncing .cart_totals .wc-proceed-to-checkout a.checkout-button,
.noofno-visual-native-cart.noofno-cart-dirty .cart_totals .wc-proceed-to-checkout a.checkout-button {
  opacity:.64;
  cursor:progress;
}

.noofno-visual-native-cart.noofno-cart-syncing .woocommerce-cart-form {
  cursor:progress;
}

.noofno-visual-native-cart.noofno-cart-syncing .woocommerce-cart-form table.shop_table tbody tr.cart_item {
  transition:opacity .18s ease;
}

.noofno-visual-native-cart.noofno-cart-syncing .cart_totals {
  position:relative;
}

.noofno-visual-native-cart.noofno-cart-syncing .cart_totals::after {
  content:"Updating cart...";
  position:absolute;
  right:14px;
  top:14px;
  padding:4px 7px;
  border:1px solid #eadfd8;
  border-radius:999px;
  background:#fff9f5;
  color:#6a4030;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Shared button shapes. */
.noofno-visual-native-cart .woocommerce-cart-form td.actions button.button,
.noofno-visual-native-cart .woocommerce-cart-form td.actions .coupon button.button {
  min-height:42px;
  padding:0 16px;
  border-radius:8px;
  background:#2a211d;
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media(max-width:760px) {
  .noofno-visual-native-cart .woocommerce {
    padding:10px 10px 28px;
  }

  .noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody {
    /* Mobile inherits the same cell width so column count stays monotonic;
       only tighten spacing. */
    column-gap:4px;
    row-gap:14px;
    padding:12px 6px;
  }

  .noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody tr.cart_item {
    min-height:0;
    padding:3px 2px 4px;
    border-radius:7px;
  }

  .noofno-visual-native-cart .woocommerce-cart-form td.product-name {
    min-height:15px;
    font-size:clamp(5px,0.35vw + 3px,6.5px);
    line-height:1.12;
  }

  .noofno-visual-native-cart .woocommerce-cart-form td.product-remove a.remove {
    width:15px;
    height:15px;
  }

  .noofno-visual-native-cart .woocommerce-cart-form td.product-remove a.remove::after {
    font-size:clamp(7px,0.4vw + 4px,9px);
  }

  .noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity {
    width:min(100%,58px);
  }

  .noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity a.ast-qty-placeholder,
  .noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity button.nfb-vqty-btn,
  .noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity button.nfb-qty-btn,
  .noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity button {
    width:17px;
    max-width:17px;
    height:18px;
    font-size:clamp(8px,0.4vw + 6px,11px);
  }

  .noofno-visual-native-cart .woocommerce-cart-form td.product-quantity .quantity input.qty {
    flex:0 0 24px;
    width:24px;
    min-width:24px;
    max-width:24px;
    height:18px;
    min-height:18px;
    font-size:clamp(9px,0.4vw + 7px,10.5px);
    line-height:18px;
  }

  .noofno-visual-native-cart .woocommerce-cart-form td.product-name {
    max-width:100%;
    overflow:hidden;
    word-break:break-word;
  }

  .noofno-visual-native-cart .woocommerce-cart-form td.product-subtotal {
    font-size:clamp(6.5px,0.5vw + 4px,10px);
  }

  .noofno-visual-native-cart .cart-collaterals .cart_totals {
    padding:16px 14px;
  }

  .noofno-visual-native-cart .cart_totals table.shop_table,
  .noofno-visual-native-cart .cart_totals table.shop_table tbody {
    display:block;
    width:100%;
  }

  .noofno-visual-native-cart .cart_totals table.shop_table tr {
    display:flex!important;
    grid-template-columns:none;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    width:100%;
    padding:10px 0;
  }

  .noofno-visual-native-cart .cart_totals table.shop_table th,
  .noofno-visual-native-cart .cart_totals table.shop_table td {
    display:block!important;
    width:auto!important;
    min-width:0;
    font-size:12px;
    line-height:1.35;
  }

  .noofno-visual-native-cart .cart_totals table.shop_table td {
    flex:0 0 auto;
    max-width:64%;
    text-align:right;
    word-break:normal;
  }

  .noofno-visual-native-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals {
    display:block!important;
  }

  .noofno-visual-native-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals th,
  .noofno-visual-native-cart .cart_totals table.shop_table tr.woocommerce-shipping-totals td {
    width:100%!important;
    max-width:none;
    text-align:left;
  }

  .noofno-visual-native-cart .cart_totals .woocommerce-shipping-totals ul#shipping_method {
    display:grid;
    gap:6px;
  }

  .noofno-visual-native-cart .cart_totals .woocommerce-shipping-totals li {
    display:flex;
    align-items:flex-start;
    gap:7px;
    margin:0;
    font-size:12px;
  }

  .noofno-visual-native-cart .cart_totals .woocommerce-shipping-totals li input {
    flex:0 0 auto;
    margin-top:2px;
  }

  .noofno-visual-native-cart .cart_totals .woocommerce-shipping-destination {
    font-size:10.5px;
    line-height:1.35;
    text-align:left;
  }

  .noofno-visual-native-cart .woocommerce-cart-form td.actions {
    grid-template-columns:1fr;
  }

  .noofno-visual-native-cart .woocommerce-cart-form td.actions .coupon {
    display:grid;
    grid-template-columns:1fr;
  }
}


/* ============================================================
   0.9.59: compact cart summary so the bracelet grid stays the
   focus inside the drawer. Tighter tbody rhythm, coupon row,
   Cart totals card and checkout CTA margins/paddings.
   ============================================================ */
.noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody {
  padding:12px clamp(10px,1.8vw,24px) 14px;
  row-gap:18px;
}
.noofno-visual-native-cart .noofno-visual-cart-note {
  margin:0 0 8px;
  padding:8px 12px;
}
.noofno-visual-native-cart .woocommerce-cart-form td.actions {
  padding:8px 0 0!important;
}
.noofno-visual-native-cart .woocommerce-cart-form td.actions .coupon {
  gap:6px;
}
.noofno-visual-native-cart .woocommerce-cart-form td.actions .coupon input.input-text,
.noofno-visual-native-cart .woocommerce-cart-form td.actions .coupon button.button {
  min-height:38px;
}
.noofno-visual-native-cart .cart-collaterals {
  margin-top:12px;
}
.noofno-visual-native-cart .cart-collaterals .cart_totals {
  padding:12px;
}
.noofno-visual-native-cart.noofno-visual-cart-frame .cart-collaterals .cart_totals {
  padding:10px 12px 12px;
}
.noofno-visual-native-cart .cart_totals h2 {
  margin:0 0 6px;
  font-size:18px;
}
.noofno-visual-native-cart .cart_totals table.shop_table tr {
  padding:5px 0;
}
.noofno-visual-native-cart .cart_totals .wc-proceed-to-checkout {
  margin-top:10px;
}
.noofno-visual-native-cart .cart_totals .wc-proceed-to-checkout a.checkout-button {
  min-height:44px;
  padding:9px 20px;
  font-size:12px;
}
.noofno-visual-native-cart .cart_totals .woocommerce-shipping-destination {
  margin:2px 0 0;
}
@media(max-width:760px) {
  .noofno-visual-native-cart .woocommerce-cart-form table.shop_table tbody {
    padding:10px 8px 12px;
    row-gap:14px;
  }
  .noofno-visual-native-cart .cart-collaterals .cart_totals {
    padding:10px;
  }
}


/* 0.9.60: collapsible cart summary. Closed by default: coupon row, shipping
   note and "Calculate shipping" are hidden behind a Details toggle, so the
   drawer shows only Subtotal/Shipment/Total + checkout CTA. */
.noofno-details-toggle {
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:100%; margin:0 0 10px; padding:8px 12px;
  border:1px solid #eadfd8; border-radius:8px;
  background:#fff9f5; color:#6a4030;
  font-size:12px; font-weight:800; letter-spacing:.02em; font-family:Arial,sans-serif;
  cursor:pointer;
}
.noofno-details-toggle:hover { border-color:#d8c0b0; background:#fff4ec; }
.noofno-visual-native-cart:not(.is-details-open) .woocommerce-cart-form td.actions { display:none!important; }
.noofno-visual-native-cart:not(.is-details-open) .cart_totals .woocommerce-shipping-calculator-button,
.noofno-visual-native-cart:not(.is-details-open) .cart_totals .woocommerce-shipping-destination { display:none!important; }


/* 0.9.62: fix what "details" collapses. Default closed shows ONLY a single
   Total row + the checkout CTA + a small "Details" link; the coupon row, the
   Subtotal/Shipment breakdown rows, the shipping note and "Calculate shipping"
   all live behind the toggle. The toggle is a small right-aligned pill, not a
   full-width bar. */
.noofno-details-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:auto;
  max-width:none;
  margin:0 0 8px auto;
  padding:6px 14px;
  border:1px solid #d8c0b0;
  border-radius:999px;
  background:#fff2ea;
  color:#9a5a20;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  font-family:Arial,sans-serif;
  line-height:1.2;
  cursor:pointer;
  text-align:center;
}
.noofno-details-toggle:hover { background:#ffeadb; }
.noofno-visual-native-cart:not(.is-details-open) .woocommerce-cart-form td.actions { display:none!important; }
.noofno-visual-native-cart:not(.is-details-open) .cart_totals table.shop_table tr:not(.order-total) { display:none!important; }
.noofno-visual-native-cart:not(.is-details-open) .cart_totals .woocommerce-shipping-calculator-button,
.noofno-visual-native-cart:not(.is-details-open) .cart_totals .woocommerce-shipping-destination,
.noofno-visual-native-cart:not(.is-details-open) .cart_totals .woocommerce-shipping-totals ul { display:none!important; }