/*  styles.css   */

/*
CSS is structurally sound
No obvious overflow bombs 
Cart panel sizing is correct
Mobile behavior is intentional
Forms no longer leak width
Grid is doing real work, not guessing
*/





/* 
  Resolve mobile overflow bugs - eg. cart panel plus padding is wider than the viewport.
    Causes:
    - fixed widths + padding without box-sizing
    - buttons with implicit min-width
    - width: 360px exceeding viewport + padding
    - grid columns not collapsing

    Prevents:
    - cart panel width + padding overflow
    - form inputs exceeding cards
    - buttons expanding outside grids
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}


/* Base */
body {
    margin: 0;
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Ubuntu,
      Cantarell,
      'Helvetica Neue',
      Arial,
      sans-serif;    
    background: #f4f1ec;
    color: #222;
}

a {
    color: #ff7a2f;
    text-decoration: none;
}

/*  if a button has unbounded padding or min-width, it can cause horizontal scroll on mobile 
    eg.   <button id="cart-toggle">🛒 Cart <span id="cart-count">0</span></button> 

    Protects against:
      - emoji + text buttons (🛒 Cart 10)
      - long translated labels later
      - Safari weirdness
 */
button {
  max-width: 100%;
}

/* Header */
.site-header {
    background: #222;
    color: #eee;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.brand-main {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.brand-sub {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    margin-left: 8px;
    opacity: 0.55;
    text-transform: uppercase;
}

@media (max-width: 420px) {
    .brand {
        flex-direction: column;
        align-items: flex-start;
    }

    .brand-sub {
        margin-left: 0;
        margin-top: 2px;
    }
}

/* Layout */
.product-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

.back-link {
    display: inline-block;
    margin-bottom: 16px;
}

.product-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Mobile */
@media (max-width: 768px) {
    .product-layout {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 900px) {
  .product-layout {
    grid-template-columns: 1.2fr 1fr;   /* Image slightly larger */
    gap: 48px;
    align-items: start;
  }
}


/* Info */
.product-info h1 {
    margin-top: 0;
    letter-spacing: 1px;
}

@media (min-width: 900px) {
  .product-info {
    max-width: 520px;   /* Copy column constrained (prevents floaty look) */
  }
}


/* Description */
.product-description {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #ccc;
}

@media (min-width: 900px) {
  .product-description {
    /* max-width: 980px; */  /* Description readable width */
  }
}

.tagline {
    color: #777;
}

.status-block {
    margin: 12px 0;
    padding: 8px;
    border-left: 4px solid #ccc;
    background: #eee;
}

.status-block.in_stock {
    border-color: green;
}

.status-block.coming_soon {
    border-color: orange;
}

.status-block.out_of_stock {
    border-color: #999;
}

.XXXXXXXXXXXPOOXXXXXXXXprice {
    margin: 16px 0;
}


.price {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}


/* Buttons   poo */
.btn {
    display: inline-block;
    padding: 10px 16px;
    border: 2px solid #222;
    border-radius: 20px;
    background: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;    
}


.btn.primary {
  color: #ff7a2f;
  border-color: #ff7a2f;
  border: 2px solid #222;
  font-size: 0.85rem; 
  font-weight: normal;  
  padding: 8px 14px;
}


.btn.secondary {
  color: #ff7a2f;
  border-color: #ff7a2f;
  border: 2px solid #222;
  font-size: 0.8rem;  
  font-weight: normal;
  padding: 8px 14px;
}


.btn.ghost {
  border: 2px dashed #999;
  color: #777;
  font-size: 0.8rem;  
  padding: 8px 14px;
}

.btn:hover {
  background: #222;
  color: #ff7a2f;
}

 


/* Footer */
.site-footer {
    margin-top: 48px;
    padding: 16px;
    text-align: center;
    font-size: 12px;
    opacity: 0.6;
}



/*   Homepage/inventoryView styles */


.inventory-intro {
    max-width: 680px;
    margin-top: 2px;    
    margin-bottom: 20px;
    font-size: 14px;
    color: #444;
}

.inventory-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px;
    padding-top:8px;
}

@media (max-width: 480px) {
  .inventory-page {
    padding: 16px;
  }
}

.inventory-section {
    margin-bottom: 48px;
}

.inventory-section h2 {
    letter-spacing: 0.8px;
    margin-bottom: -12px;
    margin-top: 20px;
}


/*

.inventory-item  (flex-direction: column ==> dealing with the vertical axis)
  ├── content
  └── purchase-row

    [ image ]
    [ title ]
    [ description ]
    [ version note ]
    ----------------  ← invisible stretch space
    [ unit value ]
    [ Add to Cart ]
*/
.inventory-item {
    display: flex;
    flex-direction: column;

    background: #f2efe9;   
    border: 2px solid #222;
    padding: 16px; 
    padding-bottom:10px;
    height: 100%;
}


.inventory-content {
    flex: 1;
}

.inventory-action {
    margin-top: 0px;
}


.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  /* align-items: stretch;   poo */   /* Make grid items stretch so it fills the vert space */
}


.inventory-grid.muted .inventory-item {
    opacity: 0.8;
}

.inventory-grid.archived .inventory-item {
    opacity: 0.6;
    border-style: dashed;
}


/* Mobile */
@media (max-width: 599px) {
    .inventory-grid {
        grid-template-columns: 1fr;
    }
}

/* Tablet */
@media (min-width: 600px) and (max-width: 899px) {
    .inventory-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop */
@media (min-width: 900px) {
    .inventory-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.inventory-item form {
    display: inline-block;
}

.inventory-item .btn {
    margin-top: 10px;
}

.inventory-item h3 {
    margin-top: 0;
    margin-bottom: 12px;  
    /* min-height: 2.4em;  */   /* reserve 2 lines */
    line-height: 1.2;
}

@media (min-width: 600px) {

  .inventory-item h3 {
    /* min-height: 2.4em;  */   /* reserve 2 lines for non mobile */
    line-height: 1.2;
  }
}



.inventory-item p {
    margin-top: 0;
    margin-bottom: 12px;   
}


/*
Clicking anywhere on the product card ==> product page
Clicking buttons / forms ==> does not navigate
Use a data-href on the card + JS delegation.
*/
.inventory-item.js-card-link {
  cursor: pointer;
}

.inventory-item.js-card-link:hover {
  background: rgba(0,0,0,0.06); /* barely there */
}



.inventory-image {
    width: 100%;
    max-height: 260px;    
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #fff;
    margin-bottom: 12px;
}

.inventory-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* If long descriptions are messing up rhythm, clamp to 3 lines max */
.desc {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 8px;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.desc-note {
  display: block; /* move to new line  */
  margin-top: 4px;
  font-size: 0.9em;
  opacity: 0.7;
}


.meta {
    margin-top: 2px;
    margin-bottom: 0px;
    font-size: 0.9rem;
}

.meta strong {
  display: block;    /* give it its own line  */
  font-size: 1rem;
  font-weight: 600;    
}

/*
.meta.subtle {
    display: block;
    margin-top: 0px;
}  */

.subtle,
.meta.subtle {
  font-size: 0.85rem;
  opacity: 0.6;
}

@media (max-width: 599px) {
    .meta {
        margin-bottom: 0px;
    }
}

/*  Shared CSS for available, in prod and archived */
.inventory-purchase {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/*   mobile has CTA below?
@media (max-width: 480px) {
    .inventory-purchase {
        flex-direction: column;
        align-items: flex-start;
    }
}
*/

/* Make the button full-width for consistency: */
.inventory-purchase .btn {
    align-self: flex-end;
}


/* cart styles */

.cart-page h1 {
    margin-bottom: 24px;
    letter-spacing: 1.5px;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
}

.cart-table th,
.cart-table td {
    padding: 12px;
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
}

.item-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-cell img {
    width: 60px;
    border: 2px solid #222;
}

.qty-form input {
    width: 60px;
}

/*  A$122           [CHECKOUT]   */
.cart-summary {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.remove {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
}


/* admin styles  */

.admin-page {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
}

.admin-table th,
.admin-table td {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    text-align: left;
}

.admin-block {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #ccc;
}

.admin-block h2 {
    margin-top: 0;
    font-size: 0.6rem;
}

/* tracking styles */

.track-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
}

.track-page h1 {
    letter-spacing: 1.5px;
}

.ref {
    opacity: 0.7;
    margin-bottom: 24px;
}

.track-block {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #ccc;
}

.status {
    font-weight: bold;
    text-transform: uppercase;
}

.status.preparing {
    color: orange;
}

.status.shipped {
    color: green;
}

.status.delivered {
    color: #444;
}

.tracking-note {
    margin-top: 12px;
    padding-left: 12px;
    border-left: 3px solid #222;
    font-style: italic;
}

.quiet {
    margin-top: 32px;
    font-size: 12px;
    opacity: 0.6;
}

/* shopping cart */

#cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
}

/* total and CHECKOUT  */
#cart-summary {
  font-size: 0.9rem;
  opacity: 0.65;
}

#cart-summary strong {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/*
cart-panel
 ├─ header (fixed height)
 ├─ items (flex + scroll)
 └─ footer (fixed height)

 Each item has a divider and the panel footer (Checkout button) floats far away.

 Ensures:
    - desktop = fixed sidebar feel
    - mobile = full-width sheet
    - no phantom horizontal scroll


  <div id="cart-overlay">
    <div class="cart-panel">

      <header>
        <h2>Cart</h2>
        <button class="btn ghost js-close-cart">Close</button>
      </header>

      <div id="cart-items">

        <div class="cart-item">
          <img class="cart-thumb" src="/images/products/hammer.jpg">
          <div class="cart-meta">
            <strong>Big Handle Hammer</strong>
            <span class="price">29.00</span>
          </div>
          <div class="cart-controls">
            <button onclick="updateCart(1, 'dec')">−</button>
            <span>6</span>
            <button onclick="updateCart(1, 'inc')">+</button>
            <button onclick="updateCart(1, 'remove')">×</button>
          </div>
        </div>

      </div>
      <footer>
        <a href="/checkout.php" class="btn primary">Checkout</a>
      </footer>

    </div>
  </div>

*/
.cart-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 360px;
  max-width: 100vw;
  height: 100vh; 
  background: #fff;
  padding: 16px;
  overflow-y: auto; 
  display: flex;
  flex-direction: column;
} 

@media (min-width: 536px) {
  .cart-panel {
    width: 520px;      /* wider on most screens */
  }
}

@media (max-width: 480px) {
  .cart-panel {
    width: 100vw;       /* full width on mobile */
    max-width: 100vw;
  }
}

.cart-panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-close {
  border: 2px dashed #999;
  border-radius: 999px;
  padding: 6px 10px;
}

.cart-panel footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 16px;
  border-top: 1px solid #ddd;
  /* flex-direction: column;   poo */
}

.cart-panel footer .btn.primary {
  margin-top: 8px;
  margin-bottom: 12px;
}

/* 
    Cart opens as a sidebar - Each item is one row - Images are thumbnails - administrative, not retail
    Cap the cart content height - so long carts don’t push checkout off-screen
    header stays visible - footer (Checkout) stays visible - items scroll independently 

    <div id="cart-items">
      <div class="cart-item">
        <div class="cart-left">
          <img class="cart-thumb" src="/images/products/hammer.jpg" alt="">
          <div class="cart-meta">
            <strong>Big Handle Hammer</strong>
            <span class="price">29.00</span>
          </div>
        </div>
        <div class="cart-controls">
          <button onclick="updateCart(1, 'dec')">−</button>
          <span>2</span>
          <button onclick="updateCart(1, 'inc')">+</button>
          <button onclick="updateCart(1, 'remove')">×</button>
        </div>
      </div>
 */
#cart-items {
  flex: 1;
  overflow-y: auto;
  padding: 0;    /*  .cart-panel already has padding: 16px  */
}

/* Desktop + mobile layout (single grid, no breakpoints needed) */
/*
.cart-item
  ├── .cart-row (grid)
  └── .cart-version-row (block, full width)


  [ image | title + price | controls ]
           ↓
     centered version link

*/
.cart-item {
  display: flex;
  flex-direction: column;
  padding: 14px 0;
  border-bottom: 1px solid #ddd;
 
  /* align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #ddd;  */
}

/* prevents the controls in cart rows from forcing overflow on mobile   */
@media (max-width: 480px) {
  .cart-item {
    /* gap: 8px;  */
    padding: 14px 0;    
  }
}

/*  align the first row - so first item not stuck to the header */
#cart-items .cart-item:first-child {
  margin-top: 4px;
}

.cart-item strong {
  display: block;
  font-size: 0.95rem;
}

.cart-item .price {
  font-size: 0.8rem;
  opacity: 0.7;
}

.cart-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 16px;
  align-items: center;
}


.cart-left {
  display: flex;
  align-items: center;   /* vertical centering */
  gap: 12px;
}


.cart-thumb {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border: 1px solid #ccc;

  /* background: #f4f1ec; */
}


.cart-meta {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  justify-content: center;
}

/* name reads as primary, price as secondary metadata  */
.cart-meta strong {
  display: block;
  font-size: 1rem;

  line-height: 1.2;
  margin-bottom: 4px;
}

.cart-meta .price {
  display: block;    /* needed?  */
  opacity: 0.65;
  margin-top: 2px;
  line-height: 1.1;
  color: #666;
  font-size: 0.9rem;
}

.cart-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.cart-controls button {
  width: 34px;
  height: 34px;
  padding: 0;

  /* border: 1px solid #222;
  background: none;  poo */
  cursor: pointer;
}

/* prevents the buttons in cart rows from forcing overflow on mobile   */
@media (max-width: 480px) {
  .cart-controls button {
    width: 22px;
    height: 22px;
  }
}


.cart-link {
  display: contents; /* keeps grid intact - lets the link behave like it wraps multiple grid cells without breaking layout */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.cart-link:hover .cart-meta strong {
  text-decoration: underline;
}


.cart-note {
  display:block;
  font-size: 0.75rem;
  opacity: 0.5;
  margin-top: 2px;
}


/*
<div class="cart-item">
  <strong class="cart-name">Big Handle Hammer</strong>
  <div class="cart-version">Version: Red</div>
  <a href="/product.php?id=1" class="cart-change">Change version</a>
*/
.cart-version {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 2px;
}

.cart-change {
  font-size: 0.85rem;
  opacity: 0.6;
  text-decoration: underline;
  margin-top: 4px;
  display: inline-block;
}


.cart-version-row {
  text-align: center;
  margin-top: 2px;
  font-size: 0.9rem;
}

.cart-version-link {
  color: #665;
  text-decoration: underline;
  opacity: 0.7;
}

.cart-version-link:hover {
  opacity: 1;
}


/*
    Total        $187.00
    ---------------------
    [ Checkout ] 

.cart-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  padding: 12px 0;
  width: 100%;
}

.cart-total-row span {
  opacity: 0.7;
  letter-spacing: 0.02em;
}

.cart-total-row strong {
  font-weight: 600;
}
*/

/* show "1 item added to cart"  */
.notice {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 8px 12px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 6px;
  padding: 8px 12px;
  line-height: 1.4;
  z-index: 1000; 
  border: 1px solid #ccc;
  background: #222;
  color: #ff7a2f;
}


/* Interest form */

.interest-form {
  margin-top: 8px;
  display: grid;
  gap: 6px; 
  max-width: 100%;  
}

/* hidden so zero layout */
.is-hidden {
  display: none !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
}

.interest-form input,
.interest-form textarea {
  width: 100%;
  box-sizing: border-box;   /* prevents email inputs from exceeding the card width  */
  /* 
  font-size: 14px;
  max-width: 100%;
  padding: 6px;  */
}

.interest-form .meta {
  font-size: 13px;
  opacity: 0.7;
}

.interest-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.js-interest-toggle,
.js-interest-meta {
  transition: opacity 120ms ease;
}

/*  =============================================== Product page ================================================== */

.product-purchase {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 320px;
}

.product-purchase select {
    padding: 8px 10px;
    font-size: 14px;
}

.product-purchase .btn {
    align-self: flex-start; /* keeps it clean and left-aligned */
}
 

.static-version .version-value {
    padding: 8px 10px;
    background: #f2f2f2;
    border: 1px solid #ddd;
    font-size: 14px;
}

.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

 /* VERSION DROPDOWN     ADD BUTTON */
.product-actions {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}


.main-image {
  position: relative;
  overflow: hidden;
  cursor: zoom-in;
}

.main-image img {
  width: 100%;
  transition: transform 0.15s ease;
  transform-origin: center center;
  border: 2px solid #222;    
}

.main-image.zoomed {
  cursor: zoom-out;
}

.main-image.zoomed img {
  transform: scale(1.9);    
}

.thumbs {
    display: flex;
    gap: 8px;
}

.thumb {
    width: 60px;
    cursor: pointer;
    opacity: 0.6;
    border: 2px solid transparent;
}

.thumb.active {
    opacity: 1;
    border-color: #222;
}


.floatRight{float:right;margin-left:20px}