/* ===== Furniture Story — Customer account area =====
Themes the WHOLE account section in the makieta editorial language:
login, register, forgotten/reset, dashboard, edit profile, change password,
address book, wishlist, order history, returns, rewards, vouchers, downloads,
transactions, newsletter + the account success / logout pages.
Loaded only on account/* routes (common/header.php adds the and puts the
`fs-account-page` class on ). Everything is scoped under .fs-account-page.
The generic OpenCart account-module sidebar is dropped here — navigation lives in
the redesigned dashboard hub + breadcrumbs — so the layout is full-width & editorial.
The global .fs-chrome header/footer is a sibling of the page wrapper, never touched.
Design tokens (--bg, --ink, --accent, --serif …) come from the global :root in
furniture_story_chrome.css, loaded on every page. */
.fs-account-page{ background:var(--bg); --line-strong:#D7CFC2; }
.fs-account-page *{ box-sizing:border-box; }
/* ---- shell : drop the OC sidebar module, go full width ---- */
.fs-account-page #column-left,
.fs-account-page #column-right{ display:none !important; }
.fs-account-page #content{ width:100%; float:none; min-height:auto; margin:0 auto; }
.fs-account-page > .container{
max-width:1180px; margin:0 auto; padding:54px 48px 100px;
font-family:var(--sans); color:var(--ink); font-size:15px; line-height:1.6;
}
/* comfortable reading widths per page type */
.fs-account-page #account-login #content{ max-width:1000px; }
.fs-account-page #account-register #content{ max-width:820px; }
.fs-account-page #account-forgotten #content,
.fs-account-page #account-reset #content,
.fs-account-page #account-password #content,
.fs-account-page #account-edit #content,
.fs-account-page #common-success #content{ max-width:660px; }
/* ---- breadcrumb (minimal editorial) ---- */
.fs-account-page > .container > .breadcrumb{
list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:9px;
padding:0; margin:0 0 36px; border:none; background:none;
font-size:12px; letter-spacing:0.04em; color:var(--muted);
}
.fs-account-page > .container > .breadcrumb > li{
display:inline-flex; align-items:center; float:none; padding:0; white-space:nowrap; text-shadow:none;
}
.fs-account-page > .container > .breadcrumb > li::after{ content:none; display:none; border:none; }
.fs-account-page > .container > .breadcrumb > li + li::before{
content:'/'; margin-right:9px; padding:0; color:var(--line); border:none;
}
.fs-account-page > .container > .breadcrumb a,
.fs-account-page > .container > .breadcrumb i{ color:var(--muted); font-size:12px; }
.fs-account-page > .container > .breadcrumb a:hover{ color:var(--ink); opacity:1; }
/* ---- editorial header (eyebrow + serif title + lede) ---- */
.fs-account-page .fs-eyebrow{
display:inline-block; font-family:var(--sans); font-size:11px; font-weight:600;
letter-spacing:0.28em; text-transform:uppercase; color:var(--terracotta); margin:0 0 16px;
}
.fs-account-page #content h1,
.fs-account-page #content h2,
.fs-account-page #content h3{
font-family:var(--serif); color:var(--ink); font-weight:500; line-height:1.1; letter-spacing:-0.01em;
}
.fs-account-page #content h1{ font-size:44px; margin:0 0 16px; }
.fs-account-page #content h2{ font-size:27px; margin:0 0 18px; }
.fs-account-page #content h3{ font-size:21px; margin:0 0 14px; }
.fs-account-page #content > p{ color:var(--ink-soft); margin:0 0 26px; max-width:60ch; }
.fs-account-page .fs-head{ margin:0 0 44px; }
.fs-account-page .fs-head.center{ text-align:center; }
.fs-account-page .fs-head.center > p{ margin-left:auto; margin-right:auto; }
.fs-account-page .fs-head h1{ margin-bottom:14px; }
.fs-account-page .fs-head p{ color:var(--ink-soft); font-size:16px; margin:0; max-width:54ch; }
/* simple form pages: lift the bare OC into the editorial language */
.fs-account-page #account-forgotten #content > h1,
.fs-account-page #account-reset #content > h1,
.fs-account-page #account-password #content > h1,
.fs-account-page #account-edit #content > h1,
.fs-account-page #common-success #content > h1{ font-size:36px; }
/* ===================================================================
LOGIN / REGISTER — editorial auth layout
=================================================================== */
.fs-account-page .fs-auth-grid{
display:grid; grid-template-columns:1.15fr 0.85fr; gap:24px; align-items:stretch;
}
.fs-account-page .fs-auth-card{
border:1px solid var(--line-strong); border-radius:var(--radius);
padding:44px 42px; display:flex; flex-direction:column;
}
.fs-account-page .fs-auth-card.fs-auth-primary{ background:var(--white); box-shadow:var(--shadow-sm); }
.fs-account-page .fs-auth-card.fs-auth-secondary{ background:var(--bg-alt); border-color:var(--line); }
.fs-account-page .fs-auth-card h2{ font-size:26px; margin:0 0 6px; }
.fs-account-page .fs-auth-card .fs-card-sub{ color:var(--ink-soft); font-size:14px; margin:0 0 26px; }
.fs-account-page .fs-auth-card form{ display:flex; flex-direction:column; flex:1 1 auto; }
.fs-account-page .fs-auth-card .fs-auth-spacer{ flex:1 1 auto; }
.fs-account-page .fs-auth-card .btn{ align-self:flex-start; }
.fs-account-page .fs-auth-secondary ul{ list-style:none; padding:0; margin:0 0 26px; }
.fs-account-page .fs-auth-secondary ul li{
position:relative; padding:9px 0 9px 26px; color:var(--ink-soft); font-size:14px;
border-bottom:1px solid var(--line);
}
.fs-account-page .fs-auth-secondary ul li:last-child{ border-bottom:none; }
.fs-account-page .fs-auth-secondary ul li::before{
content:""; position:absolute; left:2px; top:15px; width:7px; height:7px; border-radius:50%;
background:var(--sage);
}
.fs-account-page .fs-forgot{ margin:-6px 0 22px; font-size:13px; }
/* ===================================================================
ACCOUNT DASHBOARD — card hub
=================================================================== */
.fs-account-page .fs-acc-grid{
display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin:0 0 40px;
}
.fs-account-page .fs-acc-card{
display:flex; flex-direction:column; align-items:flex-start;
background:var(--white); border:1px solid var(--line-strong); border-radius:var(--radius);
padding:28px 26px 26px; color:var(--ink);
transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.fs-account-page .fs-acc-card:hover{
opacity:1; transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--accent);
}
.fs-account-page .fs-acc-ic{
width:44px; height:44px; display:flex; align-items:center; justify-content:center;
border-radius:50%; background:var(--bg-alt); color:var(--accent); margin-bottom:18px;
}
.fs-account-page .fs-acc-ic svg{ width:21px; height:21px; }
.fs-account-page .fs-acc-card strong{
font-family:var(--serif); font-size:21px; font-weight:500; color:var(--ink); margin-bottom:6px; line-height:1.2;
}
.fs-account-page .fs-acc-card small{ color:var(--muted); font-size:13px; line-height:1.5; }
.fs-account-page .fs-acc-card .fs-acc-go{
margin-top:16px; font-size:12px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
color:var(--terracotta); display:inline-flex; align-items:center; gap:7px;
opacity:0; transform:translateX(-4px); transition:opacity var(--transition), transform var(--transition);
}
.fs-account-page .fs-acc-card:hover .fs-acc-go{ opacity:1; transform:translateX(0); }
.fs-account-page .fs-acc-section-title{
font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase;
color:var(--muted); margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--line);
}
.fs-account-page .fs-acc-logout{ margin-top:8px; }
/* legacy list fallback (if any account page still ships ) */
.fs-account-page #content .list-unstyled{ list-style:none; padding:0; margin:0 0 30px; }
.fs-account-page #content .list-unstyled > li{ border-bottom:1px solid var(--line); }
.fs-account-page #content .list-unstyled > li:last-child{ border-bottom:none; }
.fs-account-page #content .list-unstyled > li > a{
display:block; padding:12px 2px; color:var(--ink-soft); font-size:14px;
transition:color var(--transition), padding var(--transition);
}
.fs-account-page #content .list-unstyled > li > a:hover{ color:var(--terracotta); opacity:1; padding-left:8px; }
/* ===================================================================
FORMS
=================================================================== */
.fs-account-page #content fieldset{ border:none; padding:0; margin:0 0 30px; }
.fs-account-page #content legend{
width:100%; font-family:var(--serif); font-size:22px; font-weight:500; color:var(--ink);
padding:0 0 12px; margin:0 0 24px; border-bottom:1px solid var(--line);
}
.fs-account-page #content .form-group{ margin-bottom:20px; }
.fs-account-page #content .control-label,
.fs-account-page #content label.control-label{
display:block; text-align:left; padding:0 0 8px; margin:0;
font-family:var(--sans); font-size:11px; font-weight:500; letter-spacing:0.12em;
text-transform:uppercase; color:var(--muted);
}
.fs-account-page #content div.required > .control-label::before{ content:none; }
.fs-account-page #content div.required > .control-label::after{ content:" *"; color:var(--terracotta); font-weight:600; }
/* turn Bootstrap's horizontal grid forms into stacked fields */
@media (min-width:768px){
.fs-account-page #content .form-horizontal .form-group > [class*="col-sm-"]{
float:none; width:100%; padding-left:0; padding-right:0;
}
}
.fs-account-page #content .form-control,
.fs-account-page #content input[type="text"],
.fs-account-page #content input[type="email"],
.fs-account-page #content input[type="tel"],
.fs-account-page #content input[type="password"],
.fs-account-page #content select,
.fs-account-page #content textarea{
width:100%; height:auto; padding:14px 16px;
font-family:var(--sans); font-size:15px; line-height:1.4; color:var(--ink);
background:var(--white); border:1px solid var(--line-strong); border-radius:2px;
box-shadow:none; transition:border-color var(--transition);
}
.fs-account-page #content textarea{ min-height:120px; resize:vertical; }
.fs-account-page #content .form-control:focus,
.fs-account-page #content input:focus,
.fs-account-page #content select:focus,
.fs-account-page #content textarea:focus{ outline:none; border-color:var(--ink); box-shadow:none; }
.fs-account-page #content select.form-control{
-webkit-appearance:none; -moz-appearance:none; appearance:none;
background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3e%3cpath fill='none' stroke='%238B857E' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3e%3c/svg%3e");
background-repeat:no-repeat; background-position:right 16px center; padding-right:40px;
}
.fs-account-page #content input::placeholder,
.fs-account-page #content textarea::placeholder{ color:var(--muted); opacity:0.65; }
/* radios & checkboxes */
.fs-account-page #content .radio,
.fs-account-page #content .checkbox{ margin:6px 0; }
.fs-account-page #content .radio label,
.fs-account-page #content .checkbox label,
.fs-account-page #content .radio-inline,
.fs-account-page #content .checkbox-inline{
font-family:var(--sans); font-size:14px; color:var(--ink-soft); font-weight:400;
text-transform:none; letter-spacing:0; padding-left:24px;
}
.fs-account-page #content .radio-inline + .radio-inline{ margin-left:18px; }
.fs-account-page #content input[type="radio"],
.fs-account-page #content input[type="checkbox"]{ accent-color:var(--accent); width:16px; height:16px; }
/* input-group (date/time pickers) */
.fs-account-page #content .input-group{ display:flex; }
.fs-account-page #content .input-group .form-control{ border-right:none; }
.fs-account-page #content .input-group-btn .btn{
border:1px solid var(--line-strong); border-left:none; background:var(--bg-alt);
color:var(--ink-soft); border-radius:0 2px 2px 0; padding:14px 16px;
}
/* inline validation */
.fs-account-page #content .text-danger{ color:var(--terracotta); font-size:12px; margin-top:6px; }
/* inline content links */
.fs-account-page #content .fs-head a,
.fs-account-page #content .fs-auth-card a:not(.btn),
.fs-account-page #content > p a,
.fs-account-page #content .form-group a,
.fs-account-page #content .buttons a:not(.btn){
color:var(--ink); text-decoration:underline; text-underline-offset:2px;
}
.fs-account-page #content .fs-head a:hover,
.fs-account-page #content .fs-auth-card a:not(.btn):hover,
.fs-account-page #content > p a:hover,
.fs-account-page #content .form-group a:hover,
.fs-account-page #content .buttons a:not(.btn):hover{ color:var(--terracotta); opacity:1; }
/* ===================================================================
BUTTONS
=================================================================== */
.fs-account-page #content .buttons{ margin:30px 0 0; }
.fs-account-page #content .buttons::after{ content:""; display:block; clear:both; }
.fs-account-page #content .buttons .pull-left{ float:left; }
.fs-account-page #content .buttons .pull-right{ float:right; display:inline-flex; align-items:center; flex-wrap:wrap; gap:14px; }
.fs-account-page #content .buttons .pull-right input[type="checkbox"]{ margin:0 0 0 4px; }
.fs-account-page #content .btn{
display:inline-flex; align-items:center; justify-content:center; gap:9px;
padding:15px 32px; font-family:var(--sans); font-size:12px; font-weight:600;
letter-spacing:0.14em; text-transform:uppercase; line-height:1;
border:1px solid transparent; border-radius:2px; text-shadow:none; box-shadow:none;
background-image:none; cursor:pointer;
transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.fs-account-page #content .btn:focus,
.fs-account-page #content .btn:active{ box-shadow:none; outline:none; }
.fs-account-page #content .btn-primary,
.fs-account-page #content input[type="submit"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.fs-account-page #content .btn-primary:hover,
.fs-account-page #content .btn-primary:focus,
.fs-account-page #content input[type="submit"]:hover{
background:var(--accent); border-color:var(--accent); color:var(--bg); opacity:1; background-position:0 0;
}
.fs-account-page #content .btn-default{ background:transparent; color:var(--ink); border-color:var(--ink); }
.fs-account-page #content .btn-default:hover,
.fs-account-page #content .btn-default:focus{ background:var(--ink); color:var(--bg); opacity:1; }
.fs-account-page #content .btn-danger{ background:transparent; color:var(--terracotta); border-color:var(--terracotta); }
.fs-account-page #content .btn-danger:hover{ background:var(--terracotta); color:var(--white); opacity:1; }
/* compact icon actions in tables */
.fs-account-page #content td .btn,
.fs-account-page #content .btn-info{
padding:9px 12px; font-size:13px; gap:0;
background:transparent; color:var(--ink-soft); border-color:var(--line-strong);
}
.fs-account-page #content td .btn:hover,
.fs-account-page #content .btn-info:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); opacity:1; }
.fs-account-page #content .btn i{ margin:0; }
/* ===================================================================
TABLES (orders, downloads, transactions, addresses, wishlist…)
=================================================================== */
.fs-account-page #content .table-responsive{ border:none; margin-bottom:24px; }
.fs-account-page #content .table{
width:100%; margin-bottom:0; background:var(--white);
border:1px solid var(--line-strong); border-collapse:collapse; font-size:14px;
}
.fs-account-page #content .table > thead > tr > td,
.fs-account-page #content .table > thead > tr > th{
background:var(--bg-alt); color:var(--muted);
font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
padding:15px 16px; border-bottom:1px solid var(--line-strong); vertical-align:middle;
}
.fs-account-page #content .table > tbody > tr > td{
padding:16px; border-top:1px solid var(--line); color:var(--ink-soft); vertical-align:middle;
}
.fs-account-page #content .table > tbody > tr:hover > td{ background:var(--bg); }
.fs-account-page #content .table.table-bordered > tbody > tr > td,
.fs-account-page #content .table.table-bordered > thead > tr > td{ border-left:1px solid var(--line); }
.fs-account-page #content .table img{ border-radius:2px; }
.fs-account-page #content .table .text-right{ text-align:right; }
.fs-account-page #content .table .text-left{ text-align:left; }
.fs-account-page #content .table a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.fs-account-page #content .table a:hover{ color:var(--terracotta); opacity:1; }
/* pagination + results */
.fs-account-page #content .pagination{ display:inline-flex; gap:6px; margin:0; }
.fs-account-page #content .pagination > li > a,
.fs-account-page #content .pagination > li > span{
border:1px solid var(--line-strong); color:var(--ink-soft); padding:8px 13px;
border-radius:2px; background:var(--white); font-size:13px;
}
.fs-account-page #content .pagination > li > a:hover{ background:var(--bg-alt); color:var(--ink); }
.fs-account-page #content .pagination > .active > span,
.fs-account-page #content .pagination > .active > a{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.fs-account-page #content .col-sm-6.text-right{ color:var(--muted); font-size:13px; padding-top:8px; }
/* ===================================================================
ALERTS
=================================================================== */
.fs-account-page > .container > .alert{
padding:15px 18px; margin:0 0 26px; border-radius:var(--radius);
border:1px solid var(--line-strong); background:var(--bg-alt); color:var(--ink-soft); font-size:14px;
}
.fs-account-page > .container > .alert .fa{ margin-right:8px; }
.fs-account-page > .container > .alert-success{ background:rgba(138,154,123,0.12); border-color:var(--sage); color:#4a5840; }
.fs-account-page > .container > .alert-danger{ background:rgba(182,107,74,0.10); border-color:var(--terracotta); color:#8f4a30; }
/* ===================================================================
AGREE / TERMS MODAL (#modal-agree — injected into by common.js
when the register "I have read and agree to the Privacy Policy" link is clicked)
=================================================================== */
.fs-account-page .modal-backdrop{ background:#1A1A1A; }
.fs-account-page .modal-backdrop.in{ opacity:0.45; }
.fs-account-page #modal-agree .modal-dialog{ max-width:640px; width:calc(100% - 36px); margin:48px auto; }
.fs-account-page #modal-agree .modal-content{
background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--radius);
box-shadow:var(--shadow-md); overflow:hidden;
}
.fs-account-page #modal-agree .modal-header{
position:relative; padding:24px 30px; border-bottom:1px solid var(--line); background:var(--white);
}
.fs-account-page #modal-agree .modal-title{
font-family:var(--serif); font-size:25px; font-weight:500; color:var(--ink); line-height:1.2; padding-right:34px;
}
.fs-account-page #modal-agree .modal-header .close{
position:absolute; top:20px; right:24px; width:32px; height:32px; padding:0;
font-size:26px; line-height:30px; font-weight:300; color:var(--muted); opacity:1;
text-shadow:none; background:none; border:none; transition:color var(--transition);
}
.fs-account-page #modal-agree .modal-header .close:hover{ color:var(--ink); opacity:1; }
.fs-account-page #modal-agree .modal-body{
padding:28px 30px 34px; max-height:62vh; overflow-y:auto;
font-family:var(--sans); font-size:14px; line-height:1.7; color:var(--ink-soft);
}
.fs-account-page #modal-agree .modal-body > :first-child{ margin-top:0; }
.fs-account-page #modal-agree .modal-body > :last-child{ margin-bottom:0; }
.fs-account-page #modal-agree .modal-body h1,
.fs-account-page #modal-agree .modal-body h2,
.fs-account-page #modal-agree .modal-body h3,
.fs-account-page #modal-agree .modal-body h4{
font-family:var(--serif); color:var(--ink); font-weight:500; line-height:1.25; margin:26px 0 10px;
}
.fs-account-page #modal-agree .modal-body h1{ font-size:24px; }
.fs-account-page #modal-agree .modal-body h2{ font-size:21px; }
.fs-account-page #modal-agree .modal-body h3{ font-size:18px; }
.fs-account-page #modal-agree .modal-body h4{ font-size:15px; }
.fs-account-page #modal-agree .modal-body p{ margin:0 0 14px; }
.fs-account-page #modal-agree .modal-body ul,
.fs-account-page #modal-agree .modal-body ol{ margin:0 0 16px; padding-left:0; list-style:none; }
.fs-account-page #modal-agree .modal-body li{ position:relative; padding:0 0 9px 22px; }
.fs-account-page #modal-agree .modal-body ul > li::before{
content:""; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--terracotta);
}
.fs-account-page #modal-agree .modal-body ol{ counter-reset:fsli; }
.fs-account-page #modal-agree .modal-body ol > li{ counter-increment:fsli; }
.fs-account-page #modal-agree .modal-body ol > li::before{
content:counter(fsli) "."; position:absolute; left:0; top:0; color:var(--terracotta); font-weight:600; font-size:13px;
}
.fs-account-page #modal-agree .modal-body strong{ color:var(--ink); font-weight:600; }
.fs-account-page #modal-agree .modal-body a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.fs-account-page #modal-agree .modal-body a:hover{ color:var(--terracotta); opacity:1; }
.fs-account-page #modal-agree .modal-body::-webkit-scrollbar{ width:10px; }
.fs-account-page #modal-agree .modal-body::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:10px; border:3px solid var(--bg); }
/* ===================================================================
RESPONSIVE
=================================================================== */
@media (max-width:991px){
.fs-account-page > .container{ padding:36px 28px 72px; }
.fs-account-page #content h1{ font-size:36px; }
.fs-account-page .fs-acc-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:767px){
.fs-account-page > .container{ padding:28px 18px 60px; }
.fs-account-page #content h1{ font-size:30px; }
.fs-account-page .fs-auth-grid{ grid-template-columns:1fr; }
.fs-account-page .fs-auth-card{ padding:30px 24px; }
.fs-account-page .fs-acc-grid{ grid-template-columns:1fr; }
.fs-account-page #content .buttons .pull-left,
.fs-account-page #content .buttons .pull-right{ float:none; width:100%; }
.fs-account-page #content .buttons .pull-right{ justify-content:flex-start; margin-top:12px; }
.fs-account-page #content .btn{ width:100%; }
.fs-account-page #content td .btn,
.fs-account-page #content .btn-info{ width:auto; }
.fs-account-page .fs-acc-card .fs-acc-go{ opacity:1; transform:none; }
}