/* CityPaws cart, checkout and order-history visual system.
   Link before pdp-cart.css and style.css: this first named layer wins over
   unlayered legacy rules while every selector stays inside commerce surfaces. */
@layer commerce-flow {
  body[data-page="cart"],
  body[data-page="checkout"],
  body[data-page="orders"],
  .account-orders .customer-order {
    --flow-forest: #104b37;
    --flow-forest-deep: #0b3b2b;
    --flow-forest-soft: #eaf3ec;
    --flow-ink: #182720;
    --flow-muted: #6b756e;
    --flow-ivory: #fbf8ef;
    --flow-paper: #fffefa;
    --flow-line: #e8e3d8;
    --flow-gold: #d3a63f;
    --flow-gold-deep: #a9791c;
    --flow-shadow: 0 5px 20px rgb(28 51 37 / 7%);
  }

  body[data-page="cart"],
  body[data-page="checkout"],
  body[data-page="orders"] {
    box-sizing: border-box;
    min-height: 100dvh;
    overflow-x: clip;
    color: var(--flow-ink) !important;
    background: var(--flow-ivory) !important;
    text-align: start;
  }

  body[data-page="cart"] *,
  body[data-page="checkout"] *,
  body[data-page="orders"] *,
  .account-orders .customer-order,
  .account-orders .customer-order * {
    box-sizing: border-box;
  }

  :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) :is(button, a, summary, input, select, textarea),
  .account-orders .customer-order :is(button, a, summary, input, select, textarea) {
    font: inherit;
  }

  :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) :is(a, button, summary, input, select, textarea):focus-visible,
  .account-orders .customer-order :is(a, button, summary, input, select, textarea):focus-visible {
    outline: 3px solid var(--flow-gold) !important;
    outline-offset: 3px !important;
  }

  :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) .page {
    width: min(100% - 36px, 1120px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    padding-block: 24px 52px !important;
    color: var(--flow-ink) !important;
    direction: inherit !important;
    text-align: start !important;
  }

  :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) :is(h1, h2, h3, p, label, small, strong, span) {
    overflow-wrap: anywhere;
  }

  :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) .flow-icon,
  .account-orders .customer-order .flow-icon {
    display: inline-block;
    flex: 0 0 auto;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  /* Shared page heading */
  :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) .commerce-page-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 24px !important;
    padding: 0 0 17px !important;
    border-bottom: 1px solid #d9cfb7 !important;
  }

  :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) :is(.commerce-back, .commerce-cart-count) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 40px !important;
    padding: 8px 12px !important;
    border: 1px solid var(--flow-line) !important;
    border-radius: 10px !important;
    background: var(--flow-paper) !important;
    color: var(--flow-forest) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    text-decoration: none !important;
  }

  :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) .commerce-page-title {
    margin: 0 !important;
    color: var(--flow-forest-deep) !important;
    font-size: clamp(25px, 3.3vw, 36px) !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
  }

  :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) .commerce-cart-count {
    border-color: #e9d7a9 !important;
    background: #fbf3df !important;
    color: #71551d !important;
    white-space: nowrap;
  }

  /* Cart: intentional two-column desktop purchase flow. */
  body[data-page="cart"] .cart-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(286px, 360px) !important;
    align-items: start !important;
    gap: clamp(18px, 3vw, 32px) !important;
    direction: inherit !important;
  }

  body[data-page="cart"] .cart-layout > * {
    min-width: 0 !important;
  }

  body[data-page="cart"] .cart-layout > :first-child {
    display: grid !important;
    align-content: start !important;
    gap: 12px !important;
  }

  body[data-page="cart"] .cart-item {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    min-height: 126px !important;
    margin: 0 !important;
    padding: 14px !important;
    border: 1px solid var(--flow-line) !important;
    border-radius: 15px !important;
    background: var(--flow-paper) !important;
    box-shadow: 0 3px 14px rgb(32 52 38 / 5%) !important;
  }

  body[data-page="cart"] .cart-item > a {
    display: grid !important;
    place-items: center !important;
    width: 88px !important;
    height: 88px !important;
    overflow: hidden !important;
    border-radius: 11px !important;
    background: #f8f5ed !important;
  }

  body[data-page="cart"] .cart-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  body[data-page="cart"] .cart-item .info {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 3px 9px !important;
    min-width: 0 !important;
  }

  body[data-page="cart"] .cart-item h3 {
    flex: 1 0 100% !important;
    margin: 0 !important;
    color: var(--flow-forest-deep) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
  }

  body[data-page="cart"] .cart-item :is(.cart-item-subtitle, .cart-weight) {
    flex: 1 0 100% !important;
    color: var(--flow-muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  body[data-page="cart"] .cart-item .price {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin: 5px 0 2px !important;
    color: var(--flow-forest) !important;
    font-size: 18px !important;
    font-weight: 850 !important;
  }

  body[data-page="cart"] .cart-item-old-price {
    color: #8b8d84 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: line-through !important;
  }

  body[data-page="cart"] .cart-item-sale-badge {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 21px !important;
    padding: 3px 7px !important;
    border-radius: 6px !important;
    background: #f7e8df !important;
    color: #a33e32 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  body[data-page="cart"] .cart-item .qty {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 36px !important;
    margin-top: 5px !important;
    border: 1px solid #ddd9ce !important;
    border-radius: 9px !important;
    background: #fff !important;
  }

  body[data-page="cart"] .cart-item .qty button {
    min-width: 35px !important;
    min-height: 34px !important;
    padding: 5px !important;
    color: var(--flow-forest) !important;
  }

  body[data-page="cart"] .cart-item .qty span {
    min-width: 27px !important;
    text-align: center !important;
    font-weight: 700 !important;
  }

  body[data-page="cart"] .cart-item .remove {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    color: #65716a !important;
    cursor: pointer !important;
  }

  body[data-page="cart"] .cart-item .remove:hover {
    background: #f8ebe5 !important;
    color: #a33e32 !important;
  }

  body[data-page="cart"] .summary-box {
    position: sticky !important;
    top: 18px !important;
    height: fit-content !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 22px !important;
    border: 1px solid var(--flow-line) !important;
    border-radius: 16px !important;
    background: var(--flow-paper) !important;
    box-shadow: var(--flow-shadow) !important;
  }

  body[data-page="cart"] .summary-box > h2 {
    margin: 0 0 16px !important;
    padding-bottom: 13px !important;
    border-bottom: 1px solid #eee9df !important;
    color: var(--flow-forest-deep) !important;
    font-size: 20px !important;
    font-weight: 850 !important;
  }

  body[data-page="cart"] .summary-box > p {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 11px 0 !important;
    color: var(--flow-muted) !important;
    font-size: 14px !important;
  }

  body[data-page="cart"] .summary-box p :is(strong, b) {
    color: var(--flow-ink) !important;
  }

  body[data-page="cart"] .cart-total-note {
    display: block !important;
    margin: 6px 0 0 !important;
    color: var(--flow-muted) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }

  body[data-page="cart"] .pdp-cart-summary {
    margin-top: 15px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--flow-line) !important;
  }

  body[data-page="cart"] .pdp-cart-summary > * {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 9px 0 !important;
    color: var(--flow-muted) !important;
    font-size: 13px !important;
  }

  body[data-page="cart"] .pdp-cart-summary > :last-child {
    margin-top: 14px !important;
    color: var(--flow-forest-deep) !important;
    font-size: 18px !important;
    font-weight: 850 !important;
  }

  body[data-page="cart"] .cart-coupon-disclosure {
    margin-top: 14px !important;
    border: 1px solid #e9e2d3 !important;
    border-radius: 11px !important;
    background: #fffdf7 !important;
  }

  body[data-page="cart"] .cart-coupon-disclosure > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    color: var(--flow-forest-deep) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  body[data-page="cart"] .cart-coupon-disclosure > summary::-webkit-details-marker,
  body[data-page="cart"] .checkout-summary > summary::-webkit-details-marker {
    display: none !important;
  }

  body[data-page="cart"] .cart-coupon-disclosure > summary::after,
  body[data-page="cart"] .checkout-summary > summary::after {
    content: "+" !important;
    color: var(--flow-gold-deep) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
  }

  body[data-page="cart"] .cart-coupon-disclosure[open] > summary::after,
  body[data-page="cart"] .checkout-summary[open] > summary::after {
    content: "−" !important;
  }

  body[data-page="cart"] .cart-coupon-disclosure .pdp-cart-coupon {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 11px 12px !important;
  }

  body[data-page="cart"] :is(.summary-box input, .pdp-cart-coupon input) {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 43px !important;
    padding: 9px 11px !important;
    border: 1px solid #dcd8cb !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: var(--flow-ink) !important;
  }

  body[data-page="cart"] :is(.summary-box .btn, .pdp-cart-coupon button, .pdp-cart-coupon .btn) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 9px 14px !important;
    border: 1px solid var(--flow-forest) !important;
    border-radius: 9px !important;
    background: var(--flow-forest) !important;
    color: #fffefa !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  body[data-page="cart"] .cart-page-actions {
    display: grid !important;
    gap: 9px !important;
    margin-top: 17px !important;
  }

  body[data-page="cart"] :is(.cart-page-actions a, .cart-page-actions button) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    min-height: 48px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--flow-forest) !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: transform .18s ease, background-color .18s ease !important;
  }

  body[data-page="cart"] .cart-checkout-link {
    border-color: var(--flow-gold) !important;
    background: var(--flow-gold) !important;
    color: var(--flow-forest-deep) !important;
    box-shadow: 0 4px 10px rgb(168 122 29 / 13%) !important;
  }

  body[data-page="cart"] .cart-continue-shopping {
    background: var(--flow-paper) !important;
    color: var(--flow-forest) !important;
  }

  body[data-page="cart"] .cart-page-actions :is(a, button):hover {
    transform: translateY(-1px);
  }

  /* Checkout: clear, sequential form with summary alongside on wide screens. */
  body[data-page="checkout"] .checkout-page {
    width: 100% !important;
    max-width: 1060px !important;
    margin-inline: auto !important;
  }

  body[data-page="checkout"] .checkout-stepper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 620px !important;
    margin: 0 auto 23px !important;
    padding: 0 !important;
    counter-reset: flow-step !important;
  }

  body[data-page="checkout"] .checkout-step-node {
    position: relative !important;
    display: grid !important;
    justify-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    color: #778078 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  body[data-page="checkout"] .checkout-step-node::before {
    counter-increment: flow-step !important;
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 1.5px solid #d7d2c7 !important;
    border-radius: 50% !important;
    background: var(--flow-paper) !important;
    color: #68736b !important;
    content: counter(flow-step) !important;
    font-size: 13px !important;
  }

  body[data-page="checkout"] .checkout-step-node.is-current::before,
  body[data-page="checkout"] .checkout-step-node.is-done::before {
    border-color: var(--flow-gold) !important;
    background: var(--flow-gold) !important;
    color: var(--flow-forest-deep) !important;
  }

  body[data-page="checkout"] .checkout-step-node.is-current {
    color: var(--flow-forest-deep) !important;
  }

  body[data-page="checkout"] #orderForm .checkout-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(285px, 350px) !important;
    align-items: start !important;
    gap: 18px !important;
    direction: inherit !important;
  }

  body[data-page="checkout"] #orderForm .checkout-layout > * {
    min-width: 0 !important;
  }

  body[data-page="checkout"] .checkout-panel {
    min-width: 0 !important;
    margin: 0 0 13px !important;
    padding: clamp(15px, 2.2vw, 22px) !important;
    border: 1px solid var(--flow-line) !important;
    border-radius: 15px !important;
    background: var(--flow-paper) !important;
    box-shadow: 0 3px 14px rgb(32 52 38 / 5%) !important;
  }

  body[data-page="checkout"] .checkout-panel > :is(h2, h3, legend) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 15px !important;
    padding: 0 0 11px !important;
    border-bottom: 1px solid #eee9df !important;
    color: var(--flow-forest-deep) !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
  }

  body[data-page="checkout"] .checkout-fields {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 13px !important;
    min-width: 0 !important;
  }

  body[data-page="checkout"] .checkout-fields .field {
    display: grid !important;
    align-content: start !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body[data-page="checkout"] .checkout-fields .field:has(.checkout-address),
  body[data-page="checkout"] .checkout-fields .field:has(textarea) {
    grid-column: 1 / -1 !important;
  }

  body[data-page="checkout"] .checkout-fields .field > :is(label, span) {
    color: #34463a !important;
    font-size: 13px !important;
    font-weight: 750 !important;
  }

  body[data-page="checkout"] .checkout-fields input,
  body[data-page="checkout"] .checkout-fields select,
  body[data-page="checkout"] .checkout-fields textarea {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    border: 1px solid #dedacf !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: var(--flow-ink) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
  }

  body[data-page="checkout"] .checkout-fields textarea {
    min-height: 84px !important;
    resize: vertical !important;
  }

  body[data-page="checkout"] .checkout-delivery-method,
  body[data-page="checkout"] .checkout-payment-cards {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    min-width: 0 !important;
  }

  body[data-page="checkout"] :is(.delivery-choice, .payment-choice) {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    min-width: 0 !important;
    min-height: 66px !important;
    padding: 11px !important;
    border: 1px solid #e3dfd5 !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: var(--flow-ink) !important;
    cursor: pointer !important;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease !important;
  }

  body[data-page="checkout"] :is(.delivery-choice, .payment-choice):has(input:checked) {
    border-color: var(--flow-forest) !important;
    background: #f0f6f0 !important;
    box-shadow: inset 0 0 0 1px var(--flow-forest) !important;
  }

  body[data-page="checkout"] :is(.delivery-choice, .payment-choice) input[type="radio"] {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    accent-color: var(--flow-forest) !important;
  }

  body[data-page="checkout"] :is(.delivery-choice, .payment-choice) :is(span, strong, small) {
    min-width: 0 !important;
  }

  body[data-page="checkout"] :is(.delivery-choice, .payment-choice) small {
    display: block !important;
    margin-top: 3px !important;
    color: var(--flow-muted) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  body[data-page="checkout"] .checkout-summary {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 17px !important;
    border: 1px solid var(--flow-line) !important;
    border-radius: 15px !important;
    background: var(--flow-paper) !important;
    box-shadow: var(--flow-shadow) !important;
  }

  body[data-page="checkout"] .checkout-summary > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    color: var(--flow-forest-deep) !important;
    font-size: 18px !important;
    font-weight: 850 !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  body[data-page="checkout"] .checkout-summary details.checkout-items,
  body[data-page="checkout"] .checkout-summary .checkout-items {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid #eee9df !important;
  }

  body[data-page="checkout"] .checkout-items > * {
    min-width: 0 !important;
  }

  body[data-page="checkout"] .checkout-submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    width: 100% !important;
    min-height: 50px !important;
    margin-top: 16px !important;
    padding: 11px 15px !important;
    border: 1px solid var(--flow-forest) !important;
    border-radius: 10px !important;
    background: var(--flow-forest) !important;
    color: #fffefa !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    text-align: center !important;
    cursor: pointer !important;
  }

  /* Orders history and account order accordions */
  body[data-page="orders"] .orders-heading {
    width: min(100%, 720px) !important;
    margin: 0 auto 20px !important;
    text-align: center !important;
  }

  body[data-page="orders"] .orders-heading :is(h1, h2) {
    margin: 0 0 8px !important;
    color: var(--flow-forest-deep) !important;
    font-size: clamp(27px, 4vw, 36px) !important;
    font-weight: 850 !important;
  }

  body[data-page="orders"] .orders-heading p {
    margin: 0 !important;
    color: var(--flow-muted) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  body[data-page="orders"] :is(.orders-list, .orders-stack, .account-orders) {
    display: grid !important;
    gap: 12px !important;
    width: min(100%, 720px) !important;
    min-width: 0 !important;
    margin-inline: auto !important;
  }

  body[data-page="orders"] .customer-order,
  .account-orders .customer-order {
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: clip !important;
    border: 1px solid var(--flow-line) !important;
    border-radius: 16px !important;
    background: var(--flow-paper) !important;
    color: var(--flow-ink) !important;
    box-shadow: 0 4px 16px rgb(32 52 38 / 5%) !important;
    direction: inherit !important;
  }

  body[data-page="orders"] .customer-order > summary,
  .account-orders .customer-order > summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px 14px !important;
    min-height: 76px !important;
    padding: 15px 17px !important;
    list-style: none !important;
    cursor: pointer !important;
  }

  body[data-page="orders"] .customer-order > summary::-webkit-details-marker,
  .account-orders .customer-order > summary::-webkit-details-marker {
    display: none !important;
  }

  body[data-page="orders"] .customer-order > summary::after,
  .account-orders .customer-order > summary::after {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    color: var(--flow-forest) !important;
    content: "⌄" !important;
    font-size: 22px !important;
    transition: transform .2s ease !important;
  }

  body[data-page="orders"] .customer-order[open] > summary::after,
  .account-orders .customer-order[open] > summary::after {
    transform: rotate(180deg) !important;
  }

  body[data-page="orders"] .customer-order-number,
  .account-orders .customer-order-number {
    color: var(--flow-ink) !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    line-height: 1.3 !important;
  }

  body[data-page="orders"] .customer-order-status,
  .account-orders .customer-order-status {
    display: inline-flex !important;
    align-items: center !important;
    justify-self: start !important;
    gap: 6px !important;
    min-height: 28px !important;
    padding: 5px 9px !important;
    border-radius: 8px !important;
    background: #e9f4e9 !important;
    color: #26543a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  body[data-page="orders"] .customer-order-date,
  .account-orders .customer-order-date {
    color: var(--flow-muted) !important;
    font-size: 12px !important;
  }

  body[data-page="orders"] .customer-order-view,
  .account-orders .customer-order-view {
    color: var(--flow-forest) !important;
    font-size: 13px !important;
    font-weight: 750 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }

  body[data-page="orders"] .customer-order-details,
  .account-orders .customer-order-details {
    padding: 0 16px 16px !important;
    border-top: 1px solid #efebe2 !important;
  }

  body[data-page="orders"] .order-tracker,
  .account-orders .order-tracker {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 17px 0 !important;
    padding: 0 !important;
  }

  body[data-page="orders"] .order-tracker-node,
  .account-orders .order-tracker-node {
    position: relative !important;
    display: grid !important;
    justify-items: center !important;
    align-content: start !important;
    gap: 6px !important;
    min-width: 0 !important;
    color: #8a918c !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }

  body[data-page="orders"] .order-tracker-node::before,
  .account-orders .order-tracker-node::before {
    display: grid !important;
    place-items: center !important;
    width: 33px !important;
    height: 33px !important;
    border: 1px solid #dedbd3 !important;
    border-radius: 50% !important;
    background: #f6f5f0 !important;
    color: #8a918c !important;
    content: "" !important;
  }

  body[data-page="orders"] .order-tracker-node.is-done::before,
  .account-orders .order-tracker-node.is-done::before {
    border-color: var(--flow-forest) !important;
    background: var(--flow-forest) !important;
    color: #fff !important;
    content: "✓" !important;
  }

  body[data-page="orders"] .order-tracker-node.is-current::before,
  .account-orders .order-tracker-node.is-current::before {
    border-color: var(--flow-gold) !important;
    background: var(--flow-gold) !important;
    color: var(--flow-forest-deep) !important;
    box-shadow: 0 0 0 4px #f8efd9 !important;
  }

  body[data-page="orders"] .order-tracker-node:is(.is-done, .is-current),
  .account-orders .order-tracker-node:is(.is-done, .is-current) {
    color: var(--flow-forest-deep) !important;
  }

  body[data-page="orders"] .order-tracker-alert,
  .account-orders .order-tracker-alert {
    margin: 12px 0 !important;
    padding: 12px 14px !important;
    border-inline-start: 3px solid var(--flow-forest) !important;
    border-radius: 9px !important;
    background: var(--flow-forest-soft) !important;
    color: #31503d !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  body[data-page="orders"] .customer-order-items,
  .account-orders .customer-order-items {
    margin: 13px 0 !important;
    padding: 0 !important;
    border-top: 1px solid #eee9df !important;
  }

  body[data-page="orders"] .customer-order-items > *,
  .account-orders .customer-order-items > * {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 12px !important;
    min-width: 0 !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #f0ede6 !important;
  }

  body[data-page="orders"] .order-details-link,
  .account-orders .order-details-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 12px !important;
    padding: 9px 14px !important;
    border: 1px solid var(--flow-forest) !important;
    border-radius: 10px !important;
    background: var(--flow-forest) !important;
    color: #fffefa !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-decoration: none !important;
  }

  body[data-page="orders"] :is(.orders-actions, .orders-support) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: min(100%, 720px) !important;
    margin: 18px auto 0 !important;
    text-align: center !important;
  }

  body[data-page="orders"] :is(.orders-actions a, .orders-support a) {
    color: var(--flow-forest) !important;
    font-weight: 750 !important;
    text-underline-offset: 3px !important;
  }

  @media (max-width: 760px) {
    :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) .page {
      width: min(100% - 28px, 620px) !important;
      padding-block: 18px 38px !important;
    }

    body[data-page="cart"] .cart-layout,
    body[data-page="checkout"] #orderForm .checkout-layout {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 14px !important;
    }

    body[data-page="cart"] .summary-box {
      position: static !important;
      padding: 17px !important;
    }

    body[data-page="checkout"] .checkout-stepper {
      margin-bottom: 17px !important;
    }

    body[data-page="checkout"] .checkout-summary {
      order: 2 !important;
    }
  }

  @media (max-width: 480px) {
    :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) .page {
      width: calc(100% - 24px) !important;
      padding-block: 14px 30px !important;
    }

    :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) .commerce-page-header {
      grid-template-columns: auto minmax(0, 1fr) auto !important;
      gap: 7px !important;
      margin-bottom: 16px !important;
      padding-bottom: 12px !important;
    }

    :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) .commerce-page-title {
      font-size: clamp(21px, 6vw, 28px) !important;
    }

    :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) :is(.commerce-back, .commerce-cart-count) {
      min-height: 36px !important;
      padding: 6px 8px !important;
      font-size: 11px !important;
    }

    body[data-page="cart"] .cart-item {
      grid-template-columns: 64px minmax(0, 1fr) 30px !important;
      gap: 9px !important;
      min-height: 0 !important;
      padding: 10px !important;
      border-radius: 12px !important;
    }

    body[data-page="cart"] .cart-item > a {
      width: 64px !important;
      height: 70px !important;
    }

    body[data-page="cart"] .cart-item h3 {
      font-size: 14px !important;
    }

    body[data-page="cart"] .cart-item .price {
      font-size: 16px !important;
    }

    body[data-page="cart"] .cart-item .remove {
      width: 30px !important;
      height: 32px !important;
    }

    body[data-page="checkout"] .checkout-panel {
      padding: 14px !important;
    }

    body[data-page="checkout"] .checkout-fields {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 11px !important;
    }

    body[data-page="checkout"] .checkout-fields .field:has(.checkout-address),
    body[data-page="checkout"] .checkout-fields .field:has(textarea) {
      grid-column: auto !important;
    }

    body[data-page="checkout"] .checkout-delivery-method,
    body[data-page="checkout"] .checkout-payment-cards {
      grid-template-columns: minmax(0, 1fr) !important;
    }

    body[data-page="orders"] .customer-order > summary,
    .account-orders .customer-order > summary {
      gap: 8px 9px !important;
      padding: 12px !important;
    }

    body[data-page="orders"] .customer-order-details,
    .account-orders .customer-order-details {
      padding: 0 11px 12px !important;
    }

    body[data-page="orders"] .order-tracker,
    .account-orders .order-tracker {
      gap: 2px !important;
    }

    body[data-page="orders"] .order-tracker-node,
    .account-orders .order-tracker-node {
      font-size: 10px !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) *,
    .account-orders .customer-order * {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
    }
  }
}

/* Integration rules for the real storefront markup. These remain in the first
   important layer, so legacy PDP/catalog styles cannot leak into commerce. */
@layer commerce-flow {
  body[data-page="checkout"] :is(.checkout-address, .checkout-pickup-notes, .checkout-delivery-notice)[hidden] {
    display: none !important;
  }
  body[data-page="checkout"] .checkout-payment-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  body[data-page="checkout"] .checkout-payment-native:focus-within {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 12px 0 0 !important;
    clip-path: none !important;
    overflow: visible !important;
  }
  body[data-page="checkout"] .checkout-summary-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }
  body[data-page="checkout"] .checkout-summary-heading h2 {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    font-size: 19px !important;
  }
  body[data-page="checkout"] .checkout-summary-heading > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 12px !important;
    color: #104b37 !important;
    text-decoration: underline !important;
  }
  body[data-page="checkout"] .checkout-summary-heading > a .flow-icon {
    width: 14px !important;
    height: 14px !important;
  }
  body[data-page="checkout"] .checkout-preview-list {
    display: grid !important;
    gap: 10px !important;
    list-style: none !important;
    margin: 12px 0 !important;
    padding: 0 !important;
  }
  body[data-page="checkout"] .checkout-preview-list li {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 9px !important;
    padding-block: 7px !important;
    border-bottom: 1px solid #eee9dd !important;
    font-size: 12px !important;
  }
  body[data-page="checkout"] .checkout-preview-list img {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    mix-blend-mode: multiply !important;
  }
  body[data-page="checkout"] .checkout-preview-list small {
    display: block !important;
    color: #71766f !important;
    margin-block-start: 3px !important;
  }
  body[data-page="checkout"] :is(.delivery-choice, .payment-choice) > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  body[data-page="checkout"] .checkout-panel.checkout-payment .checkout-payment-cards {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
  }
  body[data-page="checkout"] .checkout-pickup-notes {
    padding: 14px !important;
    background: #fffefa !important;
    border: 1px solid #e8e3d8 !important;
    border-radius: 14px !important;
  }
  body[data-page="checkout"] .checkout-stepper {
    position: relative !important;
  }
  body[data-page="checkout"] .checkout-stepper::before {
    content: "" !important;
    position: absolute !important;
    inset-inline: 17% !important;
    top: 17px !important;
    height: 1px !important;
    background: #d9d5cb !important;
  }
  body[data-page="checkout"] .commerce-total {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 12px !important;
    background: #eaf3ec !important;
    border-radius: 8px !important;
    color: #0b3b2b !important;
  }
  body[data-page="checkout"] .checkout-return-cart {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    margin-block-start: 10px !important;
    font-size: 13px !important;
    color: #104b37 !important;
  }
  body[data-page="cart"] .cart-item {
    position: relative !important;
    grid-template-columns: minmax(0, 1fr) 116px !important;
    grid-template-areas: "info media" !important;
    padding: 14px !important;
    min-height: 166px !important;
    background: #fff !important;
    border-radius: 18px !important;
  }
  body[data-page="cart"] .cart-item > a {
    grid-area: media !important;
    width: 116px !important;
    height: 140px !important;
    background: transparent !important;
  }
  body[data-page="cart"] .cart-item .info {
    grid-area: info !important;
    padding-block-end: 2px !important;
  }
  body[data-page="cart"] .cart-item img {
    max-width: 100% !important;
    max-height: 100% !important;
    mix-blend-mode: multiply !important;
  }
  body[data-page="cart"] .commerce-page-title .flow-icon {
    color: #d2a43a !important;
    fill: currentColor !important;
    stroke: none !important;
  }
  body[data-page="cart"] .cart-item .price {
    flex: 1 0 100% !important;
    flex-wrap: wrap !important;
    margin-block: 7px !important;
  }
  body[data-page="cart"] .cart-item .price.is-sale {
    color: #ce293d !important;
  }
  body[data-page="cart"] .cart-item-sale-badge {
    background: #d92339 !important;
    color: #fff !important;
  }
  body[data-page="cart"] .cart-item .qty {
    margin: 0 !important;
  }
  body[data-page="cart"] .cart-item .cart-item-actions {
    display: flex !important;
    flex: 1 0 100% !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }
  body[data-page="cart"] .cart-item .cart-item-actions .remove {
    position: static !important;
    margin: 0 !important;
    flex: 0 0 28px !important;
  }
  :is(body[data-page="cart"], body[data-page="checkout"], body[data-page="orders"]) :is(.commerce-page-header, .orders-heading) {
    background: transparent !important;
    color: #103f2e !important;
    border: 0 !important;
    box-shadow: none !important;
    position: static !important;
  }
  body[data-page="cart"] .summary-box .cart-page-actions > .cart-checkout-link {
    background: linear-gradient(110deg, #e3b846, #c99730) !important;
    color: #123f2d !important;
  }
  body[data-page="cart"] .cart-item .remove {
    position: absolute !important;
    inset-inline-start: 10px !important;
    bottom: 14px !important;
    width: 28px !important;
    height: 36px !important;
  }
  body[data-page="cart"] .summary-box > h2 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  body[data-page="cart"] .summary-box > h2::before,
  body[data-page="cart"] .summary-box > h2::after {
    content: "" !important;
    flex: 1 1 12px !important;
    max-width: 40px !important;
    height: 1px !important;
    background: #d4af37 !important;
  }
  body[data-page="cart"] .summary-box > h2 .flow-icon {
    color: #c69d38 !important;
  }
  body[data-page="cart"] .cart-coupon-disclosure {
    margin-block: 16px !important;
  }
  body[data-page="cart"] .summary-box .cart-coupon-disclosure .pdp-cart-coupon {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 12px !important;
    width: 100% !important;
  }
  body[data-page="cart"] .summary-box .cart-coupon-disclosure .pdp-cart-coupon > label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }
  body[data-page="cart"] .summary-box .cart-coupon-disclosure .pdp-cart-coupon > label > span {
    display: flex !important;
    gap: 6px !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  body[data-page="cart"] .summary-box .cart-coupon-disclosure .pdp-cart-coupon input {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    height: 40px !important;
  }
  body[data-page="cart"] .summary-box .cart-coupon-disclosure .pdp-cart-coupon button {
    position: static !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 48px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 8px !important;
  }
  body[data-page="cart"] .summary-box .cart-coupon-disclosure .pdp-cart-coupon > :is(small, p) {
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 11px !important;
    line-height: 1.55 !important;
    white-space: normal !important;
  }
  body[data-page="cart"] .summary-box .cart-coupon-disclosure .pdp-cart-coupon > p:empty {
    display: none !important;
  }
  body[data-page="cart"] .cart-item .info :is(h3, .cart-item-subtitle, .cart-weight) {
    direction: inherit !important;
    text-align: start !important;
  }
  body[data-page="cart"] .cart-coupon-disclosure > summary::after {
    margin-inline-start: auto !important;
  }
  body[data-page="cart"] .cart-page-actions {
    display: grid !important;
    gap: 12px !important;
  }
  body[data-page="cart"] .cart-page-actions > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 13px !important;
    border-radius: 10px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }
  body[data-page="cart"] .cart-checkout-link {
    background: linear-gradient(110deg, #e3b846, #c99730) !important;
    color: #123f2d !important;
  }
  body[data-page="cart"] .cart-continue-shopping {
    border: 1px solid #174a35 !important;
    background: transparent !important;
    color: #174a35 !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order > summary {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    position: relative !important;
    padding-inline-end: 26px !important;
    gap: 8px !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order-reference {
    display: grid !important;
    gap: 4px !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order-reference time {
    color: #768079 !important;
    font-size: 12px !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    background: #e6f2e2 !important;
    color: #104b37 !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order-summary-total {
    font-size: 14px !important;
    color: #104b37 !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order[open] .customer-order-summary-total {
    display: none !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order > summary::after {
    position: absolute !important;
    inset-inline-end: 2px !important;
    top: 18px !important;
  }
  :is(body[data-page="orders"], .account-orders) .order-tracker {
    list-style: none !important;
    padding: 0 !important;
    margin-block: 16px !important;
  }
  :is(body[data-page="orders"], .account-orders) .order-tracker-node::before {
    display: none !important;
  }
  :is(body[data-page="orders"], .account-orders) .order-tracker-node::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 20px !important;
    inset-inline-start: calc(50% + 21px) !important;
    width: calc(100% - 42px) !important;
    height: 2px !important;
    background: #d4d8d4 !important;
  }
  :is(body[data-page="orders"], .account-orders) .order-tracker-node:last-child::after {
    display: none !important;
  }
  :is(body[data-page="orders"], .account-orders) .order-tracker-node.is-done::after {
    background: #14543a !important;
  }
  :is(body[data-page="orders"], .account-orders) .order-tracker-symbol {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    border: 2px solid #d8dcd5 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #b6bcb8 !important;
    z-index: 1 !important;
  }
  :is(body[data-page="orders"], .account-orders) .is-current > .order-tracker-symbol {
    background: #d4a33c !important;
    border-color: #d4a33c !important;
    color: #fff !important;
  }
  :is(body[data-page="orders"], .account-orders) .is-done > .order-tracker-symbol {
    background: #14543a !important;
    border-color: #14543a !important;
    color: #fff !important;
  }
  :is(body[data-page="orders"], .account-orders) .order-tracker time {
    color: #7d847f !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
  }
  :is(body[data-page="orders"], .account-orders) :is(.customer-order-items-heading, .customer-order-total) {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding-block: 12px !important;
    margin: 0 !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order-total {
    justify-content: space-between !important;
    font-size: 20px !important;
    color: #103f2e !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order-metadata p {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding-block: 8px !important;
    border-bottom: 1px solid #eee9df !important;
    font-size: 13px !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order-more > summary {
    cursor: pointer !important;
    list-style: none !important;
    justify-content: center !important;
  }
  :is(body[data-page="orders"], .account-orders) .customer-order-whatsapp {
    display: flex !important;
    justify-content: center !important;
    gap: 7px !important;
    margin-block-start: 12px !important;
    font-size: 12px !important;
    color: #14543a !important;
  }
  body[data-page="orders"] .orders-actions > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  :is(body[data-page="orders"], .account-orders) :is(.status-cancelled, .status-returned) .customer-order-status {
    background: #fbebe4 !important;
    color: #9a3d2b !important;
  }
  @media (max-width: 900px) {
    body[data-page="checkout"] .checkout-layout {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    body[data-page="checkout"] .checkout-summary {
      position: static !important;
    }
  }
  @media (max-width: 359px) {
    body[data-page="cart"] .cart-item {
      grid-template-columns: minmax(0, 1fr) 86px !important;
      padding: 10px !important;
      gap: 8px !important;
    }
    body[data-page="cart"] .cart-item > a {
      width: 86px !important;
      height: 122px !important;
    }
    body[data-page="cart"] .cart-item h3 {
      font-size: 14px !important;
    }
    body[data-page="cart"] .cart-item .qty {
      margin: 0 !important;
    }
    body[data-page="cart"] .cart-item .qty button {
      width: 28px !important;
      min-width: 28px !important;
    }
  }
}