/* Laundralora — commerce pages (shop, product, cart, checkout). Unpublished local preview. Coordinates with styles.css. */

/* ---------- Shared helpers ---------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.btn--block{display:flex;width:100%;margin-top:14px}
.price-note{font-weight:400;font-size:.72rem;color:#6b7a78}

/* ---------- Shop ---------- */
.shop-layout{display:grid;grid-template-columns:230px 1fr;gap:32px;align-items:start;padding:var(--pad-d) 0}
.shop-filters{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px 18px}
.shop-filters fieldset{border:0;border-bottom:1px solid var(--line);margin:0 0 14px;padding:0 0 14px}
.shop-filters fieldset:last-of-type{border-bottom:0}
.shop-filters legend{font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#5b6b6a;margin-bottom:8px;padding:0}
.shop-filters label{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink);padding:4px 0;cursor:pointer}
.shop-filters input[type=radio]{accent-color:var(--accent);margin:0;flex:none}
.shop-filters .btn{margin-top:6px;width:100%}
.shop-filters__close{display:none}
.shop-filters__open{display:none}
.shop-main{min-width:0}
.shop-toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.shop-sort{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:#5b6b6a}
.shop-sort select{font-family:var(--font-body);font-size:.88rem;padding:.45em .7em;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
.shop-sort select:focus{outline:2px solid var(--accent);outline-offset:1px}
.shop-count{margin-left:auto;font-size:.82rem;color:#5b6b6a}
.shop-empty{background:var(--mist);border-radius:var(--radius);padding:32px 24px;text-align:center}
.shop-empty h2{margin-bottom:.3em}
.shop-empty p{color:#3c4a50}

/* ---------- Product cards (rendered by app.js) ---------- */
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.pcard:hover{box-shadow:0 10px 26px rgba(30,42,50,.1);transform:translateY(-2px)}
.pcard__link{display:flex;flex-direction:column;flex:1;color:var(--ink);min-width:0}
.pcard__link:hover{text-decoration:none}
.pcard__frame{position:relative;display:block;aspect-ratio:1/1;background:var(--mist);padding:10px;overflow:hidden}
.pcard__frame img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain}
.pcard__frame--motion img{transition:opacity .9s ease;opacity:0}
.pcard__frame--motion img.is-active{opacity:1}
.pcard__name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:.85rem;font-weight:500;line-height:1.35;padding:12px 14px 0}
.pcard__price{margin:auto 0 0;padding:8px 14px 16px;font-weight:600;font-size:.9rem;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.pcard__frame--motion img{transition:none}.pcard:hover{transform:none}}

/* ---------- Product page ---------- */
.breadcrumb{font-size:.82rem;color:#5b6b6a;padding:18px 0 0}
.breadcrumb a{color:#5b6b6a}
.breadcrumb a:hover{color:var(--accent)}
.product-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:var(--pad-d) 0}
.product-gallery{min-width:0;position:sticky;top:96px}
.gallery-main{aspect-ratio:1/1;background:var(--mist);border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden}
.gallery-main img{width:100%;height:100%;object-fit:contain}
.gallery-thumbs{display:flex;gap:10px;overflow-x:auto;margin-top:12px;padding-bottom:6px;scrollbar-width:thin}
.gallery-thumbs button{flex:0 0 auto;width:68px;height:68px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--mist);padding:5px;cursor:pointer}
.gallery-thumbs button:hover{border-color:var(--accent)}
.gallery-thumbs button.is-active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.gallery-thumbs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gallery-thumbs img{width:100%;height:100%;object-fit:contain}
.purchase-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.purchase-panel h1{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.25;margin-bottom:.5em}
.purchase-panel .price{font-size:1.5rem;font-weight:600;color:var(--accent);margin:.2em 0}
.purchase-panel .note{margin-top:.4em}
.attr-list{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;padding:0;list-style:none}
.attr-list li{font-size:.8rem;font-weight:500;background:var(--mist);color:var(--ink);border-radius:999px;padding:.35em .85em}
.purchase-panel .form-field{max-width:120px}
.purchase-panel .btn--primary{margin-top:6px}
.product-info{padding:var(--pad-d) 0;border-top:1px solid var(--line)}
.product-info h2{margin-top:1.4em}
.product-info h2:first-child{margin-top:0}
.product-info p{max-width:72ch;color:#3c4a50}
.product-related{padding:var(--pad-d) 0;border-top:1px solid var(--line)}

/* ---------- Cart ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start;padding:var(--pad-d) 0}
.cart-main{min-width:0}
.cart-empty{background:var(--mist);border-radius:var(--radius);padding:32px 24px;text-align:center}
.cart-empty p:first-child{font-weight:600;font-size:1.05rem}
.cart-empty .btn{margin:4px}
.cart-table{width:100%;border-collapse:collapse;font-size:.9rem}
.cart-table th{font-family:var(--font-body);font-weight:600;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:#5b6b6a;text-align:left;padding:0 8px 10px;border-bottom:1px solid var(--line)}
.cart-table td{border-bottom:1px solid var(--line);padding:14px 8px;text-align:left;vertical-align:middle}
.cart-table td:first-child{display:flex;align-items:center;gap:12px}
.cart-table img{width:56px;height:56px;object-fit:contain;background:var(--mist);border-radius:6px;flex:none}
.cart-table .cart-title{font-size:.85rem;line-height:1.35}
.cart-table input[type=number]{width:64px;font-family:var(--font-body);font-size:.9rem;padding:.4em .5em;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink)}
.cart-table .cart-remove{background:none;border:0;color:var(--warm);font-family:var(--font-body);font-size:.82rem;font-weight:600;cursor:pointer;padding:4px}
.cart-table .cart-remove:hover{text-decoration:underline}
.summary-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;position:sticky;top:96px}
.summary-panel h2{font-size:1.15rem;margin-bottom:.8em}
.summary-list{margin:0 0 14px;padding:0}
.summary-list>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.summary-list dt{color:#5b6b6a}
.summary-list dd{margin:0;text-align:right;color:var(--ink)}
.summary-total{display:flex;justify-content:space-between;gap:12px;font-weight:600;font-size:1.05rem;margin:14px 0 0;padding-top:12px;border-top:2px solid var(--ink)}
.summary-total span:last-child{color:var(--accent)}
.summary-panel .paypal-mark{margin:14px 0 0}

/* ---------- Checkout ---------- */
.checkout-layout{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;padding:var(--pad-d) 0}
.checkout-form{min-width:0}
.checkout-form section{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:20px}
.checkout-form h2{font-size:1.1rem;margin-bottom:.8em}
.checkout-form input:disabled,.checkout-form select:disabled{background:var(--paper);color:#8a9694;cursor:not-allowed}
.checkout-form .btn:disabled{opacity:.55;cursor:not-allowed}
.co-items{list-style:none;margin:0 0 14px;padding:0}
.co-items li{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:.85rem}
.co-items img{width:44px;height:44px;object-fit:contain;background:var(--mist);border-radius:6px;flex:none}
.co-items .co-name{flex:1;min-width:0;line-height:1.3}
.co-items .co-price{font-weight:600;color:var(--accent);white-space:nowrap}

/* PayPal mark (shared) */
.pp-mark{display:inline-block;font-weight:700;font-style:italic;color:#003087;letter-spacing:-.02em}
.pp-mark--alt{color:#009cde}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr;gap:20px}
  .shop-filters{position:fixed;inset:0 auto 0 0;width:min(320px,86vw);z-index:80;border-radius:0;overflow-y:auto;transform:translateX(-100%);transition:transform .22s ease;padding:56px 20px 24px;box-shadow:0 0 40px rgba(30,42,50,.25)}
  .shop-filters.is-open{transform:translateX(0)}
  .shop-filters__close{display:block;position:absolute;top:10px;right:12px;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer;padding:6px}
  .shop-filters__open{display:inline-flex}
  .shop-toolbar{position:sticky;top:0;background:var(--paper);z-index:20;padding:10px 0;margin-bottom:16px}
  .product-layout{grid-template-columns:1fr;gap:24px}
  .product-gallery{position:static}
  .cart-layout,.checkout-layout{grid-template-columns:1fr;gap:24px}
  .summary-panel{position:static}
}
@media (max-width:760px){
  .shop-layout{padding:var(--pad-m) 0}
  .shop-count{width:100%;margin-left:0}
  .product-layout{padding:var(--pad-m) 0}
  .purchase-panel{padding:20px}
  .product-info,.product-related{padding:var(--pad-m) 0}
  .cart-layout,.checkout-layout{padding:var(--pad-m) 0}
  .cart-table thead{display:none}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td{display:block;width:100%}
  .cart-table tr{border-bottom:1px solid var(--line);padding:12px 0}
  .cart-table td{border:0;padding:3px 0}
  .cart-table td:first-child{gap:10px}
  .cart-table td[data-label]::before{content:attr(data-label) ": ";font-weight:600;font-size:.78rem;color:#5b6b6a}
  .checkout-form section{padding:18px}
  .co-items li{flex-wrap:wrap}
}