/* RESTORED ORIGINAL FRAME-TEMPLATE.CSS — CLEAN, STABLE, WORKING VERSION */

/* ============================================================
   GLOBAL TEXT SIZE CONTROLS
   ============================================================ */
:root {
  --nav-text-size: 1.20rem;         /* Change this to enlarge navigation */
  --description-text-size: 1.30rem; /* Change this to enlarge descriptions */
}

/* Navigation text override */
header nav a {
  font-size: var(--nav-text-size) !important;
  line-height: 1.3 !important;
}

/* Product description text override */
.product-info,
.product-info p,
.product-info strong,
.product-info .highlight {
  font-size: var(--description-text-size) !important;
  line-height: 1.55 !important;
}

/* ============================================================
   BASE STYLES — EXACT ORIGINAL BEHAVIOR
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; background:#fff; color:#333; text-align:center; line-height:1.5; }

header img { width:500px; max-width:100%; }
header h2 { margin:10px 0; font-weight:normal; }
header nav { margin:8px 0; }
header nav a { margin:0 5px; color:#0077cc; text-decoration:none; }
header nav a:hover { color:#005999; text-decoration:underline; }
header hr { margin:15px 0; border:0; border-top:1px solid #ccc; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.main-photo { width:600px; max-width:650px; margin:20px auto; display:block; border-radius:5px; }
.products { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:20px; }
.product { width:250px; padding:20px; border-radius:8px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.1); transition:0.3s; }
.product:hover { box-shadow:0 6px 12px rgba(0,0,0,0.15); transform:translateY(-3px); }
.product img { width:100%; border-radius:5px; margin-bottom:.5rem; transition:0.3s; }
.product img:hover { transform:scale(1.06); }

.product-info p {
  max-width:700px;
  margin:0 auto 20px;
  line-height:1.5;
  text-align:center;
}

/* ============================================================
   CATALOG GRID
   ============================================================ */
.catalog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
  justify-items:center;
  align-items:start;
  text-align:center;
  width:100%;
  margin:20px auto;
}
.catalog-item { max-width:240px; min-height:280px; display:flex; flex-direction:column; align-items:center; }
.catalog-item img { width:200px; height:auto; object-fit:contain; margin-bottom:10px; transition:transform .3s; }
.catalog-item img:hover { transform:scale(1.05); }

body:not(.homepage) .catalog-grid { grid-template-columns:repeat(4,1fr); gap:25px; max-width:1200px; }
@media(max-width:768px){ body:not(.homepage) .catalog-grid { grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   HOMEPAGE
   ============================================================ */
body.homepage header > img { width:600px; max-width:600px; margin:20px auto; display:block; }
body.homepage .frame-category-grid { display:flex; justify-content:center; flex-wrap:wrap; gap:95px; margin:20px auto; }
body.homepage .frame-category { max-width:200px; text-align:center; }
body.homepage .frame-category img { width:160px; height:auto; }

/* ============================================================
   FAQ / TESTIMONIALS
   ============================================================ */
.faq-container { display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:30px; padding:20px; }
.faq-container img { width:100%; border-radius:5px; margin-bottom:10px; }
.testimonial-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:25px; padding:20px; }
.testimonial { text-align:left; padding:10px; }

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.product-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:35px; margin:30px auto; max-width:1100px; }
.product-grid .product { flex:0 0 240px; width:240px; background:#fff; padding:12px; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1); transition:.3s; }

/* ============================================================
   LINKS PAGE
   ============================================================ */
.link-grid-4, .link-grid-2 { max-width:1000px; margin:0 auto 2rem; text-align:left; }
.link-grid-4 ul { column-count:4; column-gap:40px; }
.link-grid-2 ul { column-count:2; column-gap:40px; }
.link-grid-4 a, .link-grid-2 a { font-weight:bold; color:#0077cc; text-decoration:none; }
.link-grid-4 a:hover, .link-grid-2 a:hover { color:#bfa36b; text-decoration:underline; }

/* ============================================================
   VIEW CART BUTTON
   ============================================================ */
.view-cart {
  display:inline-block;
  padding:10px 24px;
  margin:35px auto 25px;
  background:linear-gradient(to bottom,#ffefaf,#d6b04a);
  color:#000;
  font-weight:bold;
  font-size:1rem;
  border-radius:6px;
  border:1px solid #b38f2c;
  text-decoration:none;
  box-shadow:0 3px 6px rgba(0,0,0,0.15);
  transition:transform .25s ease, box-shadow .25s ease;
}
.view-cart:hover { transform:translateY(-3px); box-shadow:0 6px 12px rgba(0,0,0,0.25); }

/* ============================================================
   ADD‑TO‑CART BUTTON
   ============================================================ */
.add-to-cart {
  background:#007BFF;
  color:#fff;
  padding:6px 14px;
  font-size:14px;
  font-weight:bold;
  border:none;
  border-radius:3px;
  cursor:pointer;
  transition:background-color .3s ease, transform .1s ease;
  text-transform:uppercase;
  margin-top:15px;
}
.add-to-cart:hover { background:#0069d9; transform:translateY(-2px); }
.add-to-cart:active { background:#0056b3; transform:translateY(0); }

/* ============================================================
   QTY FIELD
   ============================================================ */
input[type="text"][name="Qty"] {
  width:55px;
  min-width:55px;
  max-width:55px;
  padding:6px;
  text-align:center;
  border:1px solid #aaa;
  border-radius:4px;
  background:#fff;
  box-sizing:border-box;
}

/* ============================================================
   RESTORE ORIGINAL SMALL‑FRAME SIZING
   ============================================================ */
/* Bellini, Wyeth, Tivoli all worked with this simple rule */
.product img.size35 {
  width:150px;
  height:auto;
  display:block;
  margin:0 auto 10px;
}

.product img.size45 {
  width:200px;
  height:auto;
}

@media (max-width: 768px) {
  .product img.size35 { width:120px; }
  .product img.size45 { width:160px; }
}

/* ============================================================
   RESTORE ORIGINAL DELIVERY TEXT BREAKING
   (no inline forcing, allow natural behavior)
   ============================================================ */
/* Your original pages relied on normal paragraph flow */
.product-info p.highlight { display:block; }
.product-info strong { display:inline; }

/* ============================================================
   END — ORIGINAL RESTORED CSS
   ============================================================ */

/* ============================================================
   SAFARI FIX — TIVOLI FIRST TWO SMALL CORNER SAMPLES
   ============================================================ */
/* Safari counts HTML comments as children, use nth-child and > for accuracy */
body.tivoli-page .products > .product:nth-child(2) img.small-corner,
body.tivoli-page .products > .product:nth-child(3) img.small-corner {
  width: 150px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 10px !important;
}

@media (max-width: 768px) {
  body.tivoli-page .products > .product:nth-child(2) img.small-corner,
  body.tivoli-page .products > .product:nth-child(3) img.small-corner {
    width: 120px !important;
  }
}

/* ============================================================
   UNIVERSAL FORM CONTROL STANDARDIZATION (MATCH FIRENZE GOLD)
   ============================================================ */

/* Qty box */
.products input[type="text"][name="Qty"],
.products input[type="number"][name="Qty"] {
  width: 55px !important;
  padding: 6px !important;
  text-align: center !important;
  font-size: 14px !important;
  border: 1px solid #aaa !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* Size/Price dropdown */
.products select[name="Size"] {
  width: 200px !important;
  max-width: 100% !important;
  padding: 8px 10px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  height: auto !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-sizing: border-box !important;
  -webkit-appearance: menulist-button !important;
}

/* Dropdown options */
.products select[name="Size"] option {
  padding: 8px 12px !important;
  font-size: 15px !important;
}

/* ============================================================
   TIVOLI — Shrink ALL small corner samples
   ============================================================ */
body.tivoli-page img.small-corner {
  width: 150px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 10px !important;
}

@media (max-width: 768px) {
  body.tivoli-page img.small-corner {
    width: 120px !important;
  }
}

/* Fix for View Cart button — black text on gold background */
.view-cart {
  color: #000 !important;
  border-color: #b38f2c !important;  /* ensure border stays consistent */
}

/* ============================================================
   FINAL OVERRIDE — VIEW CART BUTTON MUST HAVE BLACK TEXT
   ============================================================ */

html body a.view-cart,
html body .view-cart {
  color: #000 !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #000 !important; /* Safari/Chrome rendering */
}

/* ================================
   CATALOG THUMBNAIL SIZE CONTROL
   (Plein Air + Classic pages only)
   ================================ */

body.pleinair-page .catalog-grid .catalog-item img,
body.classic-page .catalog-grid .catalog-item img {
    width: 170px !important;      /* <-- adjust size here */
    height: auto !important;
    object-fit: contain !important;
    transition: transform 0.25s ease;
}

/* Hover zoom effect (optional) */
body.pleinair-page .catalog-grid .catalog-item img:hover,
body.classic-page .catalog-grid .catalog-item img:hover {
    transform: scale(1.05);
}

/* ============================================================
   CAMBRIA PAGE — Shrink 1st & 2nd product images
   ============================================================ */

body.cambria-page .products .product:nth-of-type(1) img,
body.cambria-page .products .product:nth-of-type(2) img {
  width: 150px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto 10px !important;
}

@media (max-width: 768px) {
  body.cambria-page .products .product:nth-of-type(1) img,
  body.cambria-page .products .product:nth-of-type(2) img {
    width: 120px !important;
  }
}

/* ============================================================
   FIX — Restore full-size logo on BELLINI page ONLY
   ============================================================ */
body.bellini-page header > a > img {
  width: 500px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* ============================================================
   UNIVERSAL QTY FIELD — FINAL CONSISTENT SIZE
   ============================================================ */
input[type="text"][name="Qty"],
input[type="number"][name="Qty"],
input[name="qty"],
input[name*="Qty"],
input[name*="qty"],
input.qty,
.product-qty input {
  width: 55px !important;
  min-width: 55px !important;
  max-width: 55px !important;

  padding: 6px !important;
  text-align: center !important;

  border: 1px solid #aaa !important;
  border-radius: 4px !important;
  background: #fff !important;
  box-sizing: border-box !important;

  font-size: 14px !important;
  line-height: 1 !important;

  display: inline-block !important;
}

/* ============================================================
   UNIVERSAL QTY FIELD — FINAL, CHROME-SAFE, SITEWIDE LOCK
   ============================================================ */

html body input[type="text"][name="Qty"],
html body input[type="number"][name="Qty"],
html body input[type="text"][name*="qty"],
html body input[type="number"][name*="qty"],
html body input[name="quantity"],
html body input[name*="quantity"],
html body input.qty,
html body .product-qty input,
html body input#qty {
    width: 55px !important;
    min-width: 55px !important;
    max-width: 55px !important;

    padding: 6px !important;
    text-align: center !important;
    font-size: 14px !important;

    border: 1px solid #aaa !important;
    border-radius: 4px !important;
    background: #fff !important;
    box-sizing: border-box !important;

    line-height: 1 !important;
    display: inline-block !important;

    /* Prevent cart scripts from resizing */
    flex: 0 0 55px !important;
    min-inline-size: 55px !important;

    /* Prevent unwanted browser styling */
    -webkit-appearance: none !important;
    appearance: none !important;

    /* Remove Chrome number spinners */
}
html body input[type="number"]::-webkit-inner-spin-button,
html body input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* ============================================================
   FINAL ANTI-SNAP QTY FIX (OVERRIDES INLINE STYLES)
   ============================================================ */

html body input[name="Qty"],
html body input[name="qty"],
html body input[name*="Qty"],
html body input[name*="qty"],
html body input[name="quantity"],
html body input[name*="quantity"],
html body input.qty,
html body input#qty,
html body .product-qty input {
    width: 55px !important;
    min-width: 55px !important;
    max-width: 55px !important;

    padding: 6px !important;
    text-align: center !important;
    font-size: 14px !important;

    border: 1px solid #aaa !important;
    border-radius: 4px !important;

    box-sizing: border-box !important;
    line-height: 1 !important;

    display: inline-block !important;

    /* absolutely prevents Chrome flexbox snapping */
    flex: 0 0 55px !important;
    min-inline-size: 55px !important;

    /* override ANY inline width added by scripts */
    inline-size: 55px !important;
}

/* Remove number spinners */
html body input[type="number"]::-webkit-inner-spin-button,
html body input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.fix-qty {
    width: 55px !important;
    min-width: 55px !important;
    max-width: 55px !important;
    inline-size: 55px !important;
    min-inline-size: 55px !important;
    max-inline-size: 55px !important;

    padding: 6px !important;
    text-align: center !important;
    font-size: 14px !important;

    border: 1px solid #aaa !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;

    display: inline-block !important;
    flex: 0 0 55px !important;

    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ============================================================
   WYETH PAGE — FIX TIGHT SPACING / RESTORE NORMAL PRODUCT LAYOUT
   ============================================================ */

body.wyeth-page .products {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 30px !important;          /* adds space between product boxes */
  margin-top: 30px !important;
}

body.wyeth-page .product {
  padding: 20px !important;      /* restore normal padding */
  margin: 0 15px 25px !important;/* spacing around each product */
  border-radius: 8px !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
}

body.wyeth-page .product img {
  margin-bottom: 12px !important;
}

body.wyeth-page .product p {
  margin: 6px 0 12px !important; /* fix paragraph spacing */
  line-height: 1.4 !important;
}

body.wyeth-page form {
  margin-top: 10px !important;
}

body.wyeth-page select {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

body.wyeth-page input.add-to-cart {
  margin-top: 15px !important;
}

h2.tagline {
  margin-top: 0.1em;   /* tighten space above */
  margin-bottom: 0.5em; /* optional: tighten space below */
  line-height: 1.1;     /* slightly tighter text */
}

/* ===============================
   HOMEPAGE — Bigger category images
   Put at the end of frame-template.css
   =============================== */

body.homepage .frame-category-grid {
  gap: 60px !important;               /* a little more breathing room */
  justify-content: center !important;
}

/* Grow each category container so the image can be larger */
body.homepage .frame-category {
  flex: 0 0 auto !important;
  max-width: 280px !important;        /* width of the card */
  text-align: center !important;
}

/* Make the thumbnail noticeably bigger */
body.homepage .frame-category img,
body.homepage .frame-category .corner-sample {
  width: 190px !important;            /* desktop size; change to taste */
  max-width: 100% !important;         /* so it scales down on small screens */
  height: auto !important;
  display: block !important;
  margin: 0 auto 12px auto !important;
  border-radius: 6px !important;     /* optional */
  transition: transform .25s ease !important;
}

/* Hover pop slightly (optional) */
body.homepage .frame-category img:hover {
  transform: translateY(-4px) scale(1.03);
}

/* Responsive: reduce sizes on medium and small screens */
@media (max-width: 1100px) {
  body.homepage .frame-category { max-width: 240px !important; }
  body.homepage .frame-category img { width: 190px !important; }
  body.homepage .frame-category-grid { gap: 48px !important; }
}

@media (max-width: 768px) {
  body.homepage .frame-category { max-width: 180px !important; }
  body.homepage .frame-category img { width: 140px !important; }
  body.homepage .frame-category-grid { gap: 28px !important; }
}

/* Homepage instruction text styling */
body.homepage .catalog-instruction {
  font-size: 1.4rem;           /* ~20px — change to taste (1rem ≈ 16px) */
  font-weight: 700;
  color: #222;
  text-align: center;
  margin: 16px auto 28px auto;
  max-width: 920px;
  line-height: 1.4;
}
@media (max-width: 768px) {
  body.homepage .catalog-instruction { font-size: 1.05rem; margin-bottom: 18px; }
}

/* Homepage instruction text (matches your existing class .catalog-intro) */
body.homepage .catalog-intro {
  font-size: 1.25rem;        /* ~20px — increase to taste (1rem ≈ 16px) */
  font-weight: 700;          /* stronger than bold for better emphasis */
  text-align: center;
  margin: 12px auto 26px;
  max-width: 920px;
  line-height: 1.35;
  color: inherit;            /* keeps your inline color if present (e.g. red) */
}

/* Slightly smaller on phones to avoid wrapping problems */
@media (max-width: 768px) {
  body.homepage .catalog-intro { font-size: 1.05rem; margin-bottom: 18px; }
}