/*
Theme Name: iPhoned
Theme URI: https://example.com
Author: Your Store
Description: A WooCommerce-ready storefront theme for a refurbished-iPhone retailer. Includes a custom homepage layout with trust badges, a "Shop by Model" product grid, feature panels, and a certification banner.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: iphoned
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, woocommerce, custom-menu, custom-logo, translation-ready
*/

:root{
  --blue:#2F6FED;
  --blue-dark:#1E56D6;
  --ink:#0B0D12;
  --gray-700:#374151;
  --gray-600:#4B5563;
  --gray-500:#6B7280;
  --gray-300:#D5D9E0;
  --gray-200:#E7E9EE;
  --gray-100:#F1F2F5;
  --gray-50:#F7F8FA;
  --white:#FFFFFF;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --max-w:1280px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 32px;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
a:focus-visible, button:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}

/* ===== Header ===== */
header.site-header{border-bottom:1px solid var(--gray-200);position:sticky;top:0;background:var(--white);z-index:50;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;gap:24px;}
.logo{font-size:22px;font-weight:800;letter-spacing:-0.02em;display:flex;align-items:center;gap:2px;}
.logo img{max-height:32px;width:auto;}
.logo span.dot{color:var(--blue);}
nav.main-nav ul{list-style:none;display:flex;gap:34px;margin:0;padding:0;}
nav.main-nav li{position:relative;}
nav.main-nav a{font-size:15px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:5px;padding:8px 0;}
nav.main-nav a:hover{color:var(--blue);}
nav.main-nav li.menu-item-has-children > a::after{content:"";display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:2px;}
nav.main-nav .sub-menu{
  list-style:none;position:absolute;top:100%;left:0;margin-top:10px;background:var(--white);
  border:1px solid var(--gray-200);border-radius:var(--radius-sm);box-shadow:0 12px 32px rgba(11,13,18,.12);
  min-width:200px;padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s ease;
}
nav.main-nav li:hover > .sub-menu, nav.main-nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
nav.main-nav .sub-menu a{display:block;font-size:14px;font-weight:500;padding:9px 10px;border-radius:8px;}
nav.main-nav .sub-menu a:hover{background:var(--gray-50);color:var(--blue);}
.header-actions{display:flex;align-items:center;gap:26px;}
.action-link{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:600;}
.action-link svg{width:19px;height:19px;stroke:var(--ink);}
.action-link:hover svg{stroke:var(--blue);}
.action-link:hover{color:var(--blue);}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:4px;}
.menu-toggle svg{width:24px;height:24px;stroke:var(--ink);}

/* ===== Hero ===== */
.hero{padding:0;}
.hero-photo-wrap{
  padding:64px 0 28px;
  background-image:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.65)), var(--hero-bg-mobile);
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
}
.hero-inner{max-width:600px;}
@media (min-width:900px){
  .hero-inner{max-width:clamp(525px, 56%, 680px);}
}
.eyebrow{color:var(--blue);font-weight:800;font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;}
h1.hero-title{font-size:clamp(30px, 3.6vw, 52px);line-height:1.08;letter-spacing:-0.02em;font-weight:800;margin:0 0 22px;}
.hero-sub{font-size:clamp(15px, 1.3vw, 18px);line-height:1.6;color:var(--ink);max-width:460px;margin:0 0 32px;}
.trust-row{display:flex;flex-wrap:wrap;gap:28px;margin:0 0 34px;list-style:none;padding:0;}
.trust-item{display:flex;align-items:center;gap:10px;}
.trust-item svg{width:26px;height:26px;stroke:var(--ink);flex-shrink:0;}
.trust-item span{font-size:13.5px;font-weight:700;line-height:1.25;}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 26px;border-radius:11px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.15s ease;}
.btn-primary{background:var(--blue);color:var(--white);}
.btn-primary:hover{background:var(--blue-dark);color:var(--white);}
.btn-secondary{background:var(--white);color:var(--ink);border-color:var(--gray-300);}
.btn-secondary:hover{border-color:var(--ink);}

/* Hero background photo: full-bleed on desktop, hidden on narrow screens
   where there isn't room for both the photo and the text. The image path
   is set inline on front-page.php via get_template_directory_uri() so it
   resolves correctly regardless of where the theme is installed. */
@media (min-width:900px){
  .hero-photo-wrap{
    position:relative;
    background-image:var(--hero-bg-desktop);
    background-repeat:no-repeat;
    background-position:right center;
    background-size:cover;
    min-height:440px;
    display:flex;
    align-items:center;
    padding:48px 0;
  }
  .hero-photo-wrap > .wrap{width:100%;}
}

/* ===== Panels ===== */
.panel{border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--white);padding:36px;}
section.section{padding:0 0 28px;}
.shop-model-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:28px;flex-wrap:wrap;}
.shop-model-head h2{font-size:24px;margin:0 0 6px;letter-spacing:-0.01em;}
.shop-model-head p{margin:0;color:var(--gray-500);font-size:15px;}
.view-all{font-weight:700;font-size:14.5px;color:var(--blue);display:inline-flex;align-items:center;gap:6px;margin-top:10px;}
.view-all svg{width:16px;height:16px;stroke:var(--blue);}
.model-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;}
.model-card{text-align:center;padding:22px 12px;border-radius:var(--radius-md);transition:.15s ease;display:block;}
.model-card:hover{background:var(--gray-50);}
.model-card .device{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;overflow:hidden;}
.model-card .device img{height:100%;width:auto;object-fit:contain;}
.model-card .device svg{height:145px;}
.model-card h3{font-size:15.5px;margin:0 0 4px;font-weight:700;}
.model-card .price{font-size:13.5px;color:var(--gray-500);}
.model-card .price ins{text-decoration:none;}
.model-card .price del{opacity:.55;font-size:12px;margin-right:4px;}

/* three feature cards */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;}
.feature-card{border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--gray-50);padding:32px;display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:250px;}
.feature-card .text h3{font-size:19px;margin:0 0 8px;}
.feature-card .text p{margin:0 0 16px;color:var(--gray-600);font-size:14.5px;line-height:1.5;}
.feature-card .link{font-weight:700;color:var(--blue);font-size:14.5px;display:inline-flex;align-items:center;gap:6px;}
.feature-card .link svg{width:15px;height:15px;stroke:var(--blue);}
.feature-visual{align-self:center;display:flex;justify-content:center;align-items:center;flex:1;}
.feature-visual svg{max-height:110px;}

/* Row variant: image sits to the right of the text, bleeding flush to
   the card's top/right/bottom edge instead of floating inside the padding */
.feature-card--row{flex-direction:row;align-items:stretch;justify-content:space-between;gap:20px;overflow:hidden;}
.feature-card--row .text{flex:1;}
.feature-card--row .feature-visual{
  flex:0 0 auto;align-self:stretch;width:57%;max-width:255px;
  margin:-32px -32px -32px 0;
}
.feature-card--row .feature-visual img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:1150px){
  .feature-card--row{flex-direction:column;align-items:stretch;overflow:visible;}
  .feature-card--row .feature-visual{width:auto;max-width:none;margin:0 -32px -32px -32px;height:200px;}
  .feature-card--row .feature-visual img{height:100%;object-fit:cover;}
  /* Why iPhoned's image is slightly smaller and top-anchored so its top isn't cropped */
  #why-iphoned .feature-visual{height:150px;margin:0;}
  #why-iphoned .feature-visual img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;}
}

/* trust banner */
.trust-banner{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:40px 36px 30px;text-align:center;}
.trust-banner h2{font-size:24px;margin:0 0 8px;}
.trust-banner > p{margin:0 0 30px;color:var(--gray-500);font-size:15px;}
.trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;text-align:left;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--gray-200);}
.trust-grid .item, .lower-grid .item{display:flex;gap:12px;align-items:flex-start;}
.trust-grid svg, .lower-grid svg{width:26px;height:26px;stroke:var(--ink);flex-shrink:0;margin-top:2px;}
.trust-grid h4, .lower-grid h4{font-size:14.5px;margin:0 0 3px;}
.trust-grid p, .lower-grid p{margin:0;font-size:13px;color:var(--gray-500);}
.lower-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:left;}

footer.site-footer{margin-top:40px;border-top:1px solid var(--gray-200);padding:30px 0;}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.footer-inner p{margin:0;font-size:13.5px;color:var(--gray-500);}
.footer-links{display:flex;gap:22px;list-style:none;margin:0;padding:0;}
.footer-links a{font-size:13.5px;color:var(--gray-500);}
.footer-links a:hover{color:var(--blue);}

/* WooCommerce baseline so archive/single pages inherit the look */
.woocommerce ul.products{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:20px;list-style:none;padding:0;margin:0;}
.woocommerce ul.products::before,
.woocommerce ul.products::after{content:none !important;display:none !important;}
.woocommerce ul.products li.product{
  border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:20px;text-align:center;position:relative;transition:.15s ease;
  width:auto !important;float:none !important;margin:0 !important;clear:none !important;
}
.woocommerce ul.products li.product:hover{border-color:var(--gray-300);box-shadow:0 10px 24px rgba(11,13,18,.06);}
.woocommerce ul.products li.product img{border-radius:var(--radius-sm);margin:0 auto 14px;max-height:180px;width:auto;}
.woocommerce ul.products li.product .price{color:var(--gray-500);font-size:14px;display:block;margin-top:4px;}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:#1E56D6 !important;font-weight:700;}
.woocommerce ul.products li.product .price del{opacity:.55;font-size:13px;margin-right:6px;}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:15.5px;font-weight:700;margin:0 0 4px;color:var(--ink);}
.woocommerce ul.products li.product a{display:block;}
.woocommerce ul.products li.product .onsale{
  position:absolute;top:14px;left:14px;background:#1E56D6 !important;color:var(--white) !important;font-size:11px;font-weight:800;
  padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.03em;min-height:auto;min-width:auto;line-height:1.4;
}
.woocommerce ul.products li.product .star-rating{font-size:12px;color:#F5A623;margin:0 auto 6px;}
.woocommerce a.button, .woocommerce button.button, .woocommerce #respond input#submit{
  background:var(--blue);color:var(--white);border-radius:11px;font-weight:700;padding:12px 22px;border:none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover{background:var(--blue-dark);color:var(--white);}
.woocommerce ul.products li.product a.button{width:100% !important;margin-top:14px;font-size:13.5px;padding:11px 16px;}
main.site-main{padding:0 0 60px;}

/* Shop header (title, breadcrumb, description) */
.shop-header{padding:40px 0 24px;}
.shop-header .breadcrumb{font-size:13px;color:var(--gray-500);margin:0 0 14px;}
.shop-header .breadcrumb a{color:var(--gray-500);}
.shop-header .breadcrumb a:hover{color:var(--blue);}
.shop-header h1{font-size:34px;margin:0 0 10px;letter-spacing:-0.01em;}
.shop-header .shop-desc, .shop-header .shop-desc p{color:var(--gray-500);font-size:15px;margin:0;max-width:640px;}

/* Toolbar: result count + sort dropdown */
.shop-toolbar{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:0 0 20px;border-bottom:1px solid var(--gray-200);margin-bottom:28px;
}
.shop-toolbar .woocommerce-result-count{margin:0;font-size:14px;color:var(--gray-500);}
.shop-toolbar form.woocommerce-ordering{margin:0;}
.woocommerce-ordering select{
  border:1px solid var(--gray-300);border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;
  background:var(--white);color:var(--ink);cursor:pointer;
}

/* Sidebar + product grid layout */
.shop-layout{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start;}
.shop-sidebar{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:24px;position:sticky;top:90px;}
.shop-sidebar h3{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 14px;color:var(--gray-500);font-weight:800;}
.shop-sidebar .widget{margin-bottom:28px;}
.shop-sidebar .widget:last-child{margin-bottom:0;}
.shop-sidebar ul{list-style:none;margin:0;padding:0;}
.shop-sidebar li{margin-bottom:10px;}
.shop-sidebar a{font-size:14.5px;font-weight:600;color:var(--ink);}
.shop-sidebar a:hover{color:var(--blue);}
.shop-sidebar .price_slider_wrapper{margin-top:6px;}
.shop-sidebar .price_slider_amount{
  display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:16px;font-size:13px;
}
.shop-sidebar .price_slider_amount .price_label{
  order:1;text-align:center;color:var(--gray-600);font-weight:600;
}
.shop-sidebar .price_slider_amount button.button,
.shop-sidebar .price_slider_amount input.button{
  order:2;width:100% !important;padding:9px 14px;font-size:13px;
}
.shop-sidebar .ui-slider{position:relative;height:4px;background:var(--gray-200);border-radius:4px;margin:16px 4px;}
.shop-sidebar .ui-slider .ui-slider-range{position:absolute;height:4px;background:var(--blue);border-radius:4px;}
.shop-sidebar .ui-slider .ui-slider-handle{position:absolute;top:-6px;width:16px;height:16px;background:var(--white);border:2px solid var(--blue);border-radius:50%;cursor:pointer;}

/* Pagination */
.woocommerce-pagination{margin-top:40px;text-align:center;}
.woocommerce-pagination ul{list-style:none;display:inline-flex;gap:6px;padding:0;margin:0;}
.woocommerce-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;
  border-radius:10px;border:1px solid var(--gray-200);font-weight:700;font-size:14px;padding:0 6px;
}
.woocommerce-pagination .page-numbers.current{background:var(--blue);color:var(--white);border-color:var(--blue);}
.woocommerce-pagination a.page-numbers:hover{border-color:var(--blue);color:var(--blue);}

@media (max-width:900px){
  .shop-layout{grid-template-columns:1fr;}
  .shop-sidebar{position:static;}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr) !important;}
}

@media (max-width:980px){
  h1.hero-title{font-size:38px;}
  .model-grid{grid-template-columns:repeat(3,1fr);}
  .feature-grid{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:repeat(3,1fr);}
  .lower-grid{grid-template-columns:repeat(2,1fr);}
  nav.main-nav{display:none;}
  .menu-toggle{display:block;}
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  .model-grid{grid-template-columns:repeat(2,1fr);}
  .trust-grid{grid-template-columns:1fr 1fr;}
  .header-actions .action-link span{display:none;}
  h1.hero-title{font-size:32px;}
}

/* ==================================================================
   SINGLE PRODUCT PAGE
   ================================================================== */
.breadcrumb{font-size:13px;color:var(--gray-500);margin:0 0 20px;}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb span.sep{margin:0 6px;}

.product-layout{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:start;}

/* Gallery */
.gallery{display:grid;grid-template-columns:84px 1fr;gap:16px;}
.thumbs{display:flex;flex-direction:column;gap:10px;}
.thumb{border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;padding:0;background:none;aspect-ratio:1;}
.thumb.active{border-color:var(--blue);}
.thumb img{width:100%;height:100%;object-fit:cover;}
.main-image{border:1px solid var(--gray-200);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--gray-50);}
.main-image img{width:100%;height:100%;object-fit:cover;}
.main-image svg{width:55%;}

/* Gallery feature badges */
.gallery-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;}
.g-badge{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:18px;display:flex;gap:12px;align-items:flex-start;}
.g-badge svg{width:26px;height:26px;stroke:var(--ink);flex-shrink:0;margin-top:1px;}
.g-badge h4{font-size:14px;margin:0 0 3px;}
.g-badge p{font-size:12.5px;color:var(--gray-500);margin:0;line-height:1.4;}

/* Trust strip (full width, 4 columns) */
.trust-strip{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:22px 26px;margin:32px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.trust-strip .item{display:flex;gap:12px;align-items:flex-start;}
.trust-strip svg{width:24px;height:24px;stroke:var(--ink);flex-shrink:0;margin-top:2px;}
.trust-strip h4{font-size:13.5px;margin:0 0 2px;}
.trust-strip p{font-size:12.5px;color:var(--gray-500);margin:0;}

/* Specs + Process */
.details-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;margin-bottom:32px;}
.details-card{
  border:none;border-radius:0;padding:24px 0 0;border-top:1px solid var(--gray-200);
}
.details-card summary{
  font-size:20px;font-weight:800;letter-spacing:-0.01em;margin:0;list-style:none;
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
}
.details-card summary::-webkit-details-marker{display:none;}
.details-card summary::after{
  content:"+";font-size:24px;font-weight:400;color:var(--gray-500);line-height:1;
}
.details-card[open] summary::after{content:"–";}
.details-card > *:not(summary){margin-top:18px;}
.details-card h2{font-size:19px;margin:0 0 18px;}

.spec-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--gray-100);font-size:14px;}
.spec-row:last-of-type{border-bottom:none;}
.spec-row dt{color:var(--gray-500);}
.spec-row dd{margin:0;font-weight:600;text-align:right;}

.process-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:16px;}
.process-list li{display:flex;gap:14px;}
.process-num{width:26px;height:26px;border-radius:50%;background:var(--blue);color:var(--white);font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.process-list h4{font-size:14.5px;margin:0 0 3px;}
.process-list p{font-size:13.5px;color:var(--gray-500);margin:0;line-height:1.5;}
.process-photo{border-radius:var(--radius-md);overflow:hidden;aspect-ratio:4/3;background:var(--gray-50);display:flex;align-items:center;justify-content:center;}
.process-photo img{width:100%;height:100%;object-fit:cover;}
.process-photo svg{width:45%;}

/* Reviews */
.reviews-card{border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:32px;margin-bottom:40px;}
.reviews-head{display:flex;align-items:flex-end;gap:40px;margin-bottom:24px;flex-wrap:wrap;}
.reviews-head h2{font-size:19px;margin:0 0 12px;}
.rating-big{font-size:44px;font-weight:800;line-height:1;}
.stars{color:#F5A623;font-size:16px;letter-spacing:2px;margin:8px 0 4px;}
.reviews-head .count{font-size:13px;color:var(--gray-500);}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.review-card{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:18px;}
.review-card .stars{font-size:13px;margin:0 0 4px;}
.review-card .verified{font-size:11.5px;color:var(--gray-500);font-weight:600;margin-left:6px;}
.review-card p{font-size:13.5px;color:var(--gray-700);line-height:1.5;margin:8px 0 0;}
.view-specs, .view-all-reviews{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:700;font-size:14px;margin-top:16px;}
.view-specs svg, .view-all-reviews svg{width:15px;height:15px;stroke:var(--blue);}

/* ============ PURCHASE PANEL ============ */
.buy-panel{position:sticky;top:90px;}
.buy-eyebrow{color:var(--blue);font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px;}
.buy-panel h1{font-size:30px;margin:0 0 4px;letter-spacing:-0.01em;}
.buy-variant{color:var(--gray-600);font-size:15px;margin:0 0 10px;}
.buy-rating{display:flex;align-items:center;gap:8px;margin-bottom:16px;}
.buy-rating .stars{color:#F5A623;font-size:14px;margin:0;}
.buy-rating .score{font-weight:700;font-size:14px;}
.buy-rating .count{color:var(--gray-500);font-size:13px;}

.price-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap;font-size:30px;font-weight:800;}
.price-row .woocommerce-Price-amount{font-size:30px;font-weight:800;}

/* Regular (non-sale) price: black. Targets WooCommerce's own generated
   markup (span.price / p.price / .woocommerce-Price-amount) directly, with
   specificity + !important high enough to beat WooCommerce's bundled
   "Blocks" stylesheet, which otherwise sets an olive/yellow (#958e09)
   price color globally via a --wc-highlight custom property. */
.woocommerce div.product .price-row,
.woocommerce div.product .price-row .price,
.woocommerce div.product .price-row span.price,
.woocommerce div.product .price-row p.price,
.woocommerce div.product .price-row .woocommerce-Price-amount,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product span.price {
  color: var(--ink) !important;
}

/* Sale price (the new/discounted amount, wrapped in <ins> by WooCommerce): blue */
.woocommerce div.product .price-row ins,
.woocommerce div.product .price-row ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount {
  color: #1E56D6 !important;
}
.price-row ins, .woocommerce ul.products li.product .price ins{text-decoration:none;}

/* Old/struck-through price when on sale: stays gray */
.woocommerce div.product .price-row del,
.woocommerce div.product .price-row del .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
  color: var(--gray-500) !important;
  font-weight: 400;
}
.price-row del{font-size:16px;font-weight:400;opacity:1;}
.price-row del .woocommerce-Price-amount{font-size:16px;font-weight:400;}

/* WooCommerce Blocks defines this custom property (default #958e09) and
   uses it in several places beyond just the price; redefine it here so
   anything referencing var(--wc-highlight) picks up our brand color
   instead, since our stylesheet loads after WooCommerce's. */
:root{ --wc-highlight: #1E56D6; --wc-primary: #1E56D6; --wc-secondary: #1E56D6; }

.finance-line{font-size:13px;color:var(--gray-500);margin:0 0 22px;display:none;}
.finance-line a{color:var(--blue);font-weight:600;}

.field-label{font-size:13.5px;font-weight:700;margin:0 0 10px;}
.field-block{margin-bottom:22px;}
.pill-group{display:flex;gap:8px;flex-wrap:wrap;}
.pill{border:1.5px solid var(--gray-300);border-radius:10px;padding:10px 16px;font-size:13.5px;font-weight:700;background:var(--white);cursor:pointer;}
.pill.selected{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 1px var(--blue) inset;}
.pill:hover{border-color:var(--ink);}

.swatch-group{display:flex;gap:10px;}
.swatch{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;position:relative;}
.swatch.selected{border-color:var(--blue);box-shadow:0 0 0 2px var(--white) inset;}
.swatch.selected::after{content:"";position:absolute;inset:-5px;border:1.5px solid var(--blue);border-radius:50%;}

.condition-group{display:flex;flex-direction:column;gap:10px;}
.condition-card{border:1.5px solid var(--gray-200);border-radius:12px;padding:12px 14px;cursor:pointer;}
.condition-card.selected{border-color:var(--blue);background:#F5F8FF;}
.condition-card h5{font-size:14px;margin:0 0 2px;}
.condition-card p{font-size:12.5px;color:var(--gray-500);margin:0;}

.mini-badges{display:none;grid-template-columns:1fr 1fr;gap:10px;margin:22px 0;}
.mini-badge{border:1px solid var(--gray-200);border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:center;}
.mini-badge svg{width:20px;height:20px;stroke:var(--green, #1E8E4F);flex-shrink:0;}
.mini-badge h5{font-size:12.5px;margin:0;color:var(--ink) !important;}
.mini-badge p{font-size:11px;color:var(--gray-500) !important;margin:0;}

/* Defensive: force sensible text colors throughout the purchase panel,
   since WooCommerce's bundled stylesheet defines near-white text-color
   variables (e.g. --wc-primary-text) that can silently leak onto generic
   elements (h1/h3/h5/p) we never explicitly colored ourselves, making text
   render invisible (white-on-white) while still taking up its layout
   space — which looks exactly like an unexplained blank gap. */
.buy-panel h1,
.buy-panel h3,
.buy-panel h4,
.buy-panel h5,
.buy-panel dt,
.buy-panel dd,
.buy-panel label:not(.screen-reader-text),
.buy-panel .field-label,
.buy-panel .condition-card h5,
.buy-panel .delivery-item h5 {
  color: var(--ink) !important;
}
.buy-panel p,
.buy-panel .condition-card p,
.buy-panel .delivery-item p,
.buy-panel .finance-line,
.buy-panel .buy-variant {
  color: var(--gray-600) !important;
}

.buy-buttons{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;}

.delivery-row{display:flex;justify-content:space-between;align-items:center;padding-top:18px;border-top:1px solid var(--gray-200);margin-bottom:28px;flex-wrap:wrap;gap:12px;}
.delivery-item{display:flex;gap:10px;align-items:center;}
.delivery-item svg{width:22px;height:22px;stroke:var(--ink);}
.delivery-item h5{font-size:13px;margin:0;}
.delivery-item p{font-size:11.5px;color:var(--gray-500);margin:0;}
.stock-dot{width:8px;height:8px;border-radius:50%;background:#1E8E4F;display:inline-block;margin-right:6px;}

/* FAQ */
.faq-card{border:none;padding:0;}
.faq-card h3{font-size:16px;margin:16px 0;}
details.faq-item{border-bottom:1px solid var(--gray-100);padding:14px 0;}
details.faq-item:last-of-type{border-bottom:none;}
details.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;}
details.faq-item summary::-webkit-details-marker{display:none;}
details.faq-item summary::after{content:"+";font-size:20px;color:var(--gray-500);font-weight:400;}
details.faq-item[open] summary::after{content:"–";}
details.faq-item p{font-size:13.5px;color:var(--gray-600);margin:10px 0 0;line-height:1.5;}

/* ---- Restyle WooCommerce's native add-to-cart form ----
   We keep the real <form class="cart"> so add-to-cart, AJAX, variation
   price switching, and stock checks all keep working — we just hide its
   default dropdown table/quantity stepper (our pill/swatch/condition
   buttons above drive the same hidden <select> fields via JS) and
   restyle its Add to Cart button to match the theme. */
.woocommerce div.product form.cart{margin:0;}
.woocommerce div.product form.cart .variations{display:none;}
.woocommerce div.product form.cart .reset_variations{display:none;}
.woocommerce div.product .woocommerce-variation{display:none;}

.woocommerce div.product form.cart div.quantity{
  display:block !important;margin:0 0 12px;
}
.woocommerce div.product form.cart div.quantity::before{
  content:"Quantity";display:block;font-size:13.5px;font-weight:700;margin:0 0 8px;color:var(--ink);
}
.woocommerce div.product form.cart div.quantity .screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
}
.woocommerce div.product form.cart div.quantity input.qty{
  width:90px;padding:12px 14px;border:1.5px solid var(--gray-300);border-radius:10px;
  font-size:14px;font-weight:600;color:var(--ink);
}

.woocommerce div.product form.cart .single_add_to_cart_button{
  width:100% !important;background:#1E56D6 !important;color:var(--white) !important;border-radius:11px;font-weight:700;
  padding:15px 26px;font-size:15.5px;border:none;margin:8px 0 0;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{background:var(--blue-dark) !important;}
.woocommerce div.product form.cart.variations_form .single_add_to_cart_button.disabled{opacity:.5;cursor:not-allowed;}

@media (max-width:980px){
  .product-layout{display:flex;flex-direction:column;grid-template-columns:1fr;gap:32px;}

  /* Flatten these wrapper divs on mobile only — their children become
     direct, independently-orderable items of .product-layout below,
     without touching the desktop two-column layout at all. */
  .product-main, .buy-panel, .details-grid{display:contents;}

  /* 1. Title block */
  .buy-eyebrow, .buy-panel h1, .buy-variant, .buy-rating{order:1;}
  /* 2. Image + gallery */
  .gallery{order:2;}
  /* 3. Specifications */
  .details-card:first-child{order:3;}
  /* 4. Quantity, price, Add to Cart (+ related purchase info) */
  .iphoned-price-row, .field-block, .buy-panel form.cart,
  .delivery-row{order:4;}
  /* Quantity/Add to Cart follows the price immediately (finance-line and
     mini-badges are hidden globally now, see base rules above) */
  /* 5. Trust badges (only the 3-item "Expertly Refurbished" row; the
     4-item 100%-Functional / 70+-Point / Genuine-Parts / Clean&Secure
     strip is removed entirely on mobile per request) */
  .gallery-badges{order:5;margin-top:0;}
  .trust-strip{display:none;}
  .delivery-row{margin-bottom:0;}
  /* 6. Refurbishment process */
  .details-card:last-child{order:6;}
  /* 7. FAQ */
  .faq-card{order:7;}
  /* 8. Reviews, last */
  .reviews-card{order:8;margin-bottom:0;}

  .buy-panel{position:static;margin-top:0;}
  .product-main{margin-top:0;}
  .gallery-badges{grid-template-columns:1fr;}
  .details-grid{grid-template-columns:1fr;}
  .review-grid{grid-template-columns:1fr;}

  /* "Minimal & airy": drop the boxed-card look for reviews on mobile too. */
  .reviews-card{
    border:none;border-radius:0;padding:24px 0 0;
    border-top:1px solid var(--gray-200);
  }
  .reviews-card h2{
    font-size:20px;font-weight:800;letter-spacing:-0.01em;
  }

  /* Trust badges: simplify from 3 separate bordered boxes to a clean,
     borderless row — still scannable, less "stacked cards" repetition. */
  .gallery-badges{gap:18px;}
  .g-badge{border:none;padding:0;}
}
@media (max-width:560px){
  .gallery{grid-template-columns:64px 1fr;}
  .mini-badges{grid-template-columns:1fr;}
  .trust-strip{grid-template-columns:1fr;}
}