/* Ensure hidden attribute always wins */
.ac-modal[hidden],
.ac-modal-overlay[hidden] {
  display: none !important;
} 

/* Trigger tiles (modal openers) */
.ac-tile {
  cursor: pointer;
}

/* Keyboard focus (calm but visible) */
.ac-tile:focus {
  filter: brightness(1.1);
}

.ac-tile:hover {
  filter: brightness(1.1);
} 

/* Overlay + modal positioning */
.ac-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35) !important;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}


/* Panel sizing + two-column grid */
.ac-modal__panel {
  width: min(1040px, 100%);
  background: #faf9f7;             /* warm off-white */
  position: relative;
  max-height: calc(100vh - 56px);
  overflow: hidden;

  display: grid;
  grid-template-columns: 1.15fr 0.85fr; /* image gets dominance */
}

/* Prevent background scroll when modal is open */
body.ac-modal-open {
  overflow: hidden;
}

/* Close */
/* ===== Close button (premium, understated) ===== */
.ac-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;

  width: 34px;
  height: 34px;
  padding: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 0; /* keep it editorial (no cartoon rounding) */

  color: rgba(0,0,0,0.50) !important;
  cursor: pointer;

  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}

.ac-modal__close span {
  font-size: 18px;
  transform: translateY(-1px); /* optical alignment */
}

.ac-modal__close:hover {
  border-color: rgba(0,0,0,0.28) !important;
  color: rgba(0,0,0,0.85) !important;
}

.ac-modal__close:focus {
  outline: none !important;           /* remove dotted box */
}

.ac-modal__close:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.12) !important;  /* your custom soft ring */
}


/* Keep image side contained and centered */
.ac-modal__media {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #BDBDBD;
}

/* Ensure image never stretches awkwardly */
.ac-modal__image {
  max-height: calc(100vh - 140px);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body */
.ac-modal__body {
  padding: 34px 38px;
  border-left: 1px solid rgba(0,0,0,0.05); 
  display: grid;
  align-content: start;
  gap: 18px;
}
/* Scroll inside body, not whole panel */
.ac-modal__body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.ac-modal__title {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 200;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}

.ac-modal__desc {
  margin: 6px 0 4px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(0,0,0,0.78); 
}

/* “View full details” — understated */
.ac-modal__view-link {
  display: inline-block;
  margin: 6px 0 22px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.60);
}

.ac-modal__view-link:hover {
  color: rgba(0,0,0,0.78);
}

/* Fields */
.ac-field {
  display: grid;
  gap: 6px;
  margin: 0 0 18px;
}

/* Labels: small, spaced, editorial */
.ac-field__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  margin: 0 0 8px;
}

/* Inputs/selects: “selection surface”, not default form */
.ac-field__control {
  width: 100%;
  height: 50px;
  margin-left: 0 !important;
  padding: 0 14px;

  background: rgba(0,0,0,0.02);
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 0;

  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(0,0,0,0.78);

  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.ac-field__control:focus {
  outline: none;
}

.ac-field__control:focus-visible {
  border-color: rgba(0,0,0,0.30);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.10);
}

.ac-field--qty .ac-field__control {
  max-width: 120px;
  border: 1px solid rgba(0,0,0,0.14);
  padding: 0 14px;
}
.ac-field--qty .ac-field__control:focus {
	outline: none !important;
}

/* Meta */
.ac-modal__meta {
  display: grid;
  gap: 6px;
  margin: 10px 0 14px;
}

.ac-price {
  font-size: 16px;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.70);
  margin: 0 0 6px;
}

.ac-stock {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.55);
}

/* Button */
/* ===== Button + action cluster ===== */

.ac-btn {
  width: 100%;
  height: 52px;
  padding: 0 18px;

  background: #3A3835 !important;
  color: #fff;

  border: 1px solid #3A3835 !important;
  border-radius: 0;

  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;

  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}

.ac-btn:hover {
  background: #2f2d2b !important;
  border-color: #2f2d2b !important;
}

.ac-btn:focus {
  outline: none;
}

.ac-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(0,0,0,0.12);
}

/* Disabled = calm, not “broken” */
.ac-btn:disabled {
  cursor: not-allowed;
  background: rgba(0,0,0,0.30);
  border-color: rgba(0,0,0,0.30);
  color: rgba(255,255,255,0.85);
}

/* Button micro-state styling from your JS */
.ac-btn[data-state="loading"] {
  background: rgba(0,0,0,0.55);
  border-color: rgba(0,0,0,0.55);
}

.ac-btn[data-state="added"] {
  background: transparent !important;
  border-color: #3A3835 !important;
  color: #3A3835 !important;
}

/* Feedback: minimal and composed */
.ac-feedback {
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.60);
  min-height: 16px;
}

.ac-feedback[data-type="error"] {
  color: rgba(0,0,0,0.78);
}

.ac-feedback[data-type="success"] {
  color: rgba(0,0,0,0.70);
}

/* Minimal transitions (no loud animations) */
.ac-modal-overlay,
.ac-modal {
  transition: opacity 160ms ease;
}

/* Mobile bottom sheet */
@media (max-width: 900px) {

  .ac-modal {
    align-items: flex-end;
    padding-left: clamp(14px, 4vw, 22px);
    padding-right: clamp(14px, 4vw, 22px);
    /* increase top offset so sheet sits under menu / header */
    padding-top: calc(48px + env(safe-area-inset-top));
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
    -webkit-tap-highlight-color: transparent;
  }

  .ac-modal__panel {
    width: 100%;
    max-height: 82vh; /* slightly shorter so it never touches header */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 18px;
    box-shadow: 0 -18px 60px rgba(0,0,0,0.22);
	  margin-top: 0px;
    margin-bottom: calc(10px + env(safe-area-inset-bottom));
/*    background: #fffffc; */
  }

  /* MEDIA — remove padding + radius */
  .ac-modal__media {
    flex: 0 0 auto;
    border-right: none;
    padding: 0;
  }

  .ac-modal__image {
    max-height: 34vh; /* slightly tighter */
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 0; /* removed */
    display: block;
  }

  /* Scroll container */
  .ac-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px clamp(18px, 6vw, 28px) calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(0,0,0,0.05);
    max-height: 82vh;
  }

  /* Close button — push further down so it clears menu */
  .ac-modal__close {
    position: sticky;
    top: calc(64px + env(safe-area-inset-top));
    margin-left: auto;
    z-index: 9999;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    right: auto;
  }

  .ac-modal__title {
    font-size: 20px;
    line-height: 1.15;
	margin-top: 10px;   /* increase as needed */  
	}

  .ac-field {
    margin-bottom: 12px;
  }

  .ac-field__control {
	width: 80%;      /* or 90% if you want slimmer */
  	margin: 0 auto;  /* centers them */    
	height: 42px;
    padding: 10px 12px;
    border-radius: 3px;
    font-size: 15px;
    line-height: 1.25;
  }

  .ac-btn {
    height: 48px;
    border-radius: 14px;
    font-size: 15px;
  }
}
@media (min-width: 600px) and (max-width: 900px) {
 .ac-modal__panel {
    width: 88%;        /* try 86–90% depending on taste */
    max-width: 640px;  /* keeps it premium on large tablets */
    margin-left: auto;
    margin-right: auto;
  }
  .ac-modal__media {
    max-height: 40vh;
  }
	.ac-modal__image {
    max-height: 40vh;   
  }
}